Responsive hover over tooltip

Design help General
1

Hi Guys, thanks for this amazing fast growing community, its really exciting whats happening here.

I would like to achieve a hover over tooltip that scales as it responds to screen resolution.

This is exactly what I want to do:
http://thelightbox.co.za/deskflex/

(scroll down to the table with the yellow +)

837×473 214 KB

Any help would be great.

Thanks

Gareth

2

@bartekkustra Hey bro I need some help here, do you have capacity for regular jobs on webflow.

3

You can do this by adding a hover effect. just change the dimensions and the border extensions and have it have some text inside. set it to no overflow and the text will hide as the hover

4

wait, i misread that. you can change styles based on media queries without altering you desktop or tablet media queries. just change away and it’ll automatically change based on screen res. just make sure you pick the media query first

5

This is a codecanyon plugin for wordpress called Image Map HotSpot Wordpress plugin. There is also a similar jQuery version here. This is how I would approach this as possibly a css only solution (I have not tested any of this, its only in theory).

  1. I would first go about building the desk as a background against div block. Then adjust to make sure it looks great in all defined widths.

  2. Next add the icons as div blocks as well with the icon image as the background image, the ones in the example are positioned absolutely. Then again adjust for each defined width so the result looks good, make sure nothing happened to the table background in the first step (always check to be sure new stuff doesn’t mess with the old). Also make sure icons have defined widths only big enough to capture the hover event on the icon image.

  3. Next add child divs for each popover, again, absolute positioning. Once you have then all positioned where you like and looking good for each defined width, give them each the desired animation transitions and then go ahead and hide them using display: none css property.

  4. The final and last part is simply writing custom css, i.e. .icon-div:hover .child-popover { display: block } could trigger the css animation and reveal it

3 Likes
6

Thanks guys for your immediate response-GREAT!