[How-to] Add Tooltips and Rollover Images in Unbounce

design

#22

Hi @Rob

Thanks for the update. I am currently building a new landing page for big media company project here in UK and had wanted to use that functionality. Any chance you might find the time to build in the workaround in next week or two? Otherwise I might have to look at different options for that area of the site.

Thanks
Pete


#23

Hi @peterhay I’d love to be able to promise you that i’ll get this done quickly but unfortunately I don’t think I’ll be able to have that done in time. I’ll do my best but to be honest it’s not likely. There is an entire jQuery mobile library though, so you might be able to slap something together using that, although it wold require some javascript knowledge and familiarity.

https://api.jquerymobile.com/tap/

I hope this helps at least in pointing you in the right direction until I’m able to put some more time into this workaround here.


#24

hi! I am having a dickens of a time trying to make this happen on my page: http://livingstonepartners.com/livingstoneindustrialstats/


#25

Hi @OlgaJewusiak I just had a look at the page and the images are changing when I mouse over them. They go to black and white (very cool!). Have you resolved the issues you were having earlier?


#26

Hi Rob,

The B&W hover images are working, it’s the images below (in the Our Team block) that aren’t working. Basically I’m trying to make the picture change to the colored box on top with name, title and email/social media link when a mouse hovers over the photo. I have 4 different attempts going and neither work.


#27

Ah I see, thanks for that extra context. I had another look and there were some issues with the IDs in the code not matching up properly. There were some minor issues with the CSS to hide the boxes as well. I’ve fixed things up for you and saved the page. You can check it in preview and if you’re happy go ahead and republish :slight_smile:


#28

Thank you, thank you, thank you!


#29

This hover tool looks awesome!
But for some reason, on my page the hover image pulses/flashes. Basically it appears for one sec, then disappears for a sec, then reappears etc.
Anyone know how to fix that?

Thank you,
Chloé


#30

Actually the answer was in the thread. I used the tooltips code instead of the rollover one.
It is now FIXED and it looks awesome! :smiley:


#31

Great to hear @ChloeCurve :slight_smile: Nice catch!


#32

Hi @Rob, thanks so much for this script! I’ve followed your instructions and it works almost perfectly aside from one thing – after the initial hover, the hover text stays put. If I go back and hover over the boxes again, the text appears and disappears as it should. Do you have any thoughts on why this is happening the first time I mouse over the boxes or how to fix it so that it disappears after every hover? My landing page URL is https://info.distillery.com/201806-draftlp/

Thanks in advance!


#33

Hi @Riley_Lico1 So sorry for the late reply on this! I haven’t had as much time as I like to be active in the community lately. I tried the link but it looks like the page is unpublished now. Let me know if you’re still having any issues though with this or any other page and I’d be happy to have a look for you.

All the best


#34

I’m having a heck of a time trying to get this to work.
http://page.vermeer.com/roadshow_attend/
The intent is to rollover the different locations and a box with more information will pop up but it’s not working at all. the top image is being hidden, but the hover doesn’t work.
Any help would be great!


#35

Hi HopeWadle,

Did you add a box first on top of the image you want to display, and then inserted the top image (the one you want hidden) in the box? Make the box transparent (opacity 100%) so that it doesn’t show up on you page. Then add the ID of the box in your hover stylesheet. Example:

#lp-pom-box-302 { display: none; }

You need as many stylesheets with that code as you have boxes you want to hover, with their corresponding IDs.

And make sure that your javascript contains the right IDs as well.
Example:

I hope that helps :slight_smile:


#36

Hi,
For some reason I don’t have permission to access the google drive like at the beginning of this tread.

Thank you for all the great resources.