1. Documentation
  2. Pro Tips and Scripts
  3. Animation & Effects

How to Add Rollover Images and Tooltips

Follow
Avatar
christina spadavecchia
Last Updated

This workaround shows a different element when a visitor hovers over part of your page. Use it to swap one image for another on hover, show text over an image, or display a tooltip or hint next to a button.

Two CSS hover effects: a photo of a grumpy cat labeled "Swap Images" and a blue logo labeled "Add Text Overlay on Hover"
A button and an anvil demonstrating a rollover image example in a help center UI.

See the demo page built in Unbounce.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

How it works

You add every element you want to show on hover to the page, then hide them with CSS. The script shows each hidden element when the visitor hovers over the element you choose.

Scripts and video tutorials

Set up the effect

  1. Add the elements to the page.

    • For a rollover image, stack two elements on top of each other, such as two images or boxes. The bottom element shows when the page loads, and the top element appears on hover. You can usually make two images exactly the same size with a mask, even if their proportions differ.
    • For a tooltip, place the element that appears on hover next to the element it explains, for example beside or below a button. To show both an image and text, put them in a box and show and hide the box.
    Unbounce editor showing a kitten image selected with Edit Mask option visible on the canvas.
  2. Add jQuery to the page with a new script in the JavaScripts section containing the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  1. Add the script you need to the JavaScripts section with placement set to Before Body End Tag. Use on-hover-image-swap for rollover images and text, or on-hover-show-hide for tooltips.
  2. In the variables at the top of the script, replace the IDs with the IDs of your elements.
  3. Add the following CSS to the Stylesheets section to hide the elements that appear on hover:
    <style>
      #lp-pom-image-9 {
       display: none;
      }
    </style>

Replace #lp-pom-image-9 with the ID of your element. To hide more than one element, list the IDs separated by commas.

  1. Save and republish the page.

Test the change

Run an A/B test with a small share of traffic to confirm the change doesn't lower your conversion rate.

Related articles