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

I have used the tooltip script to create a hover drop down menu, but if I mouse over the tooltip itself, the tooltip disappears. Is there a way to make the tooltip stay when you mouse over it?

Hi Rob, can you pelase take a look at this page https://investice.buresapartneri.cz i spent a lot of time and cant make the rollover for testing box. Hope you can help !


Hi @John_Steele, this is a great question and something that would be a great addition to this script. Unfortunately when I originally created it way back when the intention was to be able to show some useful tips to visitors, not to necessarily to interact with actual tooltip, so I didn’t include what you’re asking for. You could try the “rollover” version of the script though and try just not layering the two elements directly on top of each other. This should give you what you’re after as the tooltip wouldn’t disappear until someone had hovered on it and then moved the cursor away.

Hope this helps!

Hi @iGORBICEPS, apologies for the late reply here. I had a look at your page and noticed two things that are most likely preventing it from working.

  1. The placement of the jQuery code needs to be set to the “head” - https://www.screencast.com/t/hM0iFLwLEbu

  2. You’ll need to add in a “#” symbol before the first id in the script - https://www.screencast.com/t/pY2beZxr6uc

Give those thinbgs a try and it should start working for you :slight_smile:

Hi, I tried the script and it works perfectly on boxes and with a minor adjustment, it works on click instead of hover as well. Can it be customized though to hide / reveal an entire section, instead of just a box? I tried to swap the IDs for the section IDs, however, not even the CSS code will hide a section.

Hi Jack, I just can’t get this to work on my page - https://web.ghotw.com/the-wyred-world/

I’d really appreciate some help :slight_smile: thank you!