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

Rob
Userlevel 6
  • Rob
  • Former Unbouncer
  • 198 replies

Show twice the amount of content in the same amount of space or give your page visitors a little hint and some extra incentive. This simple workaround involves a little bit of Javascript and CSS to achieve some potentially powerful results.

Rollover images offer a way to improve the user experience on your page and make certain elements interactive. Want to have an image change when someone hovers over it? Or maybe you’d rather have some text appear instead? Now you can!

With a few minor adjustments to this script you’ll also be able to create your own custom tooltips and hints on the page.

See this effect in action on a live Unbounce page here:
http://unbouncepages.com/rollover-image/

Instructions

Click Here to Load the Instructions

⚠️

Please note: This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

How It Works

Whether you are using this for rollover images or for tooltips/hints, the concept is the same. You are going to create all the elements you wish to show on the page as rollover images or tooltips and then hide them with some simple CSS. Adding the Javascript and customizing it with your own element ID’s will allow you to control what is shown when certain page elements are hovered over.

Resources

Download the .unbounce File
https://drive.google.com/uc?export=download&id=0B26DYgxXQSvWak9CdnR0QzI1NjA

Tooltips

  1. Tooltip Tutorial
  2. Tooltip Scripts

Rollover Images

  1. Rollover Image Tutorial
  2. Rollover Image Scripts

Pulling it All Together

Step #1: Place the Page Elements on the Page

Let’s get started! Getting the on hover image swap working on your page won’t be too difficult. It works by stacking two Unbounce page elements (images, boxes, pretty much anything) on top of each other and then hiding the top element with some CSS. This top element will be what appears when the mouse moves over the bottom element, which will be visible when the page loads.

NOTE - Depending on the images, you can usually make two images exactly the same size despite aspect ratio by applying a mask.

If you’re creating tooltips/hints, you won’t want to stack the images on top of each other, but rather place the element you’d like to appear elsewhere on the page. For example, if you’re adding a tooltip for a button, place the text next to or below the button itself.

PRO-TIP : If you’d like to include images and text as a tooltip you can simply put anything you want to appear on hover in a box element and hide/ show that instead.

Step #2

Add jQuery to your page by adding a Javascript with the following contents:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Step #3

For an image/ text swap on mouse hover, paste the first Javascript snippet (on-hover-image-swap) onto your page and set the placement to before body end tag.

For tooltips and hints, use the second script (on-hover-show-hide).

Step #4

Change the IDs in the variables at the top of the script to match the ID’s on your page.

Step #5

Add the following CSS snippet to your page in the stylesheets tab in order to hide the tooltip/rollover image:

    <style>
      #lp-pom-image-9 {
       display: none; 
      }
    </style>

Make sure to swap #lp-pom-image-9 with the ID of your own element. You can chain multiple elements to hide by separating the IDs with a comma.

Step #6

You’re done! Save and publish the page, then kick back and relax. You’ve earned it!

Testing

Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.

Conclusion

We’ve given you the ground work, but we would love to see how you implement this on your own pages.


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

46 replies

Nicholas
Userlevel 7
Badge +4

This is awesome! Can’t wait to test it.

Subscribe to Growth Marketing Weekly → https://growthmarketer.co/newsletter
J

Great tutorial!

Would someone mind helping with the text overlay on hover please?

I seem to be having a few issues with the desktop version… mobile works fine.

When you hover over the text, it appears fine. But when you hover off, the text won’t disappear.

Page is: http://promotions.futurefit.co.uk/pro-zone-guest-partners/

If someone has any suggestions or idea what I’ve done wrong - that would be greatly appreciated!

Thanks!

Rob
Userlevel 6

Hi @Jack,

I just had a look for you and the code is set up correctly. The issue seems to be that the script is targeting the text itself and you don’t have the text element in a box that covers the whole image.

Since the script is only triggered when the mouse leaves the text box, if the mouse doesn’t actually hover over the text itself before moving away then the text will stay when you hover off the image. For example if you hover on the image below the text, it will appear, but if you hover off the image without first brining the mouse over the text, the text will stay.

Gosh I hope that makes sense…

My advice would be to add a transparent box over the image and nest your text inside that box. Set the opacity of the box to 0 and the use the ID of the box in the script instead of the ID of the text itself.

Let me know if you hit any more issues!

J

Hi @Rob ,

That all makes perfect sense actually! Such a simple solution too!

Thank you for taking the time to reply - much appreciated.

Thanks,

J

J

Hi @Rob

I am still having trouble with this, after using element boxes.

Page: http://promotions.futurefit.co.uk/the-future-of-fitness/

Desktop: content shows but flashes once. Hovering over the CTA also makes the content pulse…?
Mobile: content appears once for a second then vanishes

Javascript:

> <script>
>   $(function() {
>     $('#lp-pom-image-499').hover(function() {
>         $('#lp-pom-box-472').fadeIn("slow");
>       },
>       function(){
>         $('#lp-pom-box-472').fadeOut("slow");
>     });
>  });
> </script>

> <script>
>   $(function() {
>     $('#lp-pom-image-500').hover(function() {
>         $('#lp-pom-box-480').fadeIn("slow");
>       },
>       function(){
>         $('#lp-pom-box-480').fadeOut("slow");
>     });
>  });
> </script>

> <script>
>   $(function() {
>     $('#lp-pom-image-501').hover(function() {
>         $('#lp-pom-box-481').fadeIn("slow");
>       },
>       function(){
>         $('#lp-pom-box-481').fadeOut("slow");
>     });
>  });
> </script>

> <script>
>   $(function() {
>     $('#lp-pom-image-504').hover(function() {
>         $('#lp-pom-box-482').fadeIn("slow");
>       },
>       function(){
>         $('#lp-pom-box-482').fadeOut("slow");
>     });
>  });
> </script>

> <script>
>   $(function() {
>     $('#lp-pom-image-502').hover(function() {
>         $('#lp-pom-box-483').fadeIn("slow");
>       },
>       function(){
>         $('#lp-pom-box-483').fadeOut("slow");
>     });
>  });
> </script>

> <script>
>   $(function() {
>     $('#lp-pom-image-503').hover(function() {
>         $('#lp-pom-box-484').fadeIn("slow");
>       },
>       function(){
>         $('#lp-pom-box-484').fadeOut("slow");
>     });
>  });
> </script>

CSS

> <style>
>   #lp-pom-box-472{
>    display: none; 
>   }
> </style>

> <style>
>   #lp-pom-box-480{
>    display: none; 
>   }
> </style>

> <style>
>   #lp-pom-box-481{
>    display: none; 
>   }
> </style>

> <style>
>   #lp-pom-box-482{
>    display: none; 
>   }
> </style>

> <style>
>   #lp-pom-box-483{
>    display: none; 
>   }
> </style>

> <style>
>   #lp-pom-box-484{
>    display: none; 
>   }
> </style>

Sorry to be annoying, but any advice/guidance would be much appreciated!

Thanks,

J

Rob
Userlevel 6

@Jack not annoying at all! That’s what I’m here for 🙂

I had another look for you and I found the issue. You were using the tooltip version of the script and not the rollover version. Sorry I didn’t catch this before, but they are so darn similar I just missed that it wasn’t the right script.

I hopped into your page and adjusted the script for you and it’s working now in preview. Have a look and if you’re satisfied go ahead and republish.

All the best,
Rob

Katy_Kruse

Hello!

I’m having some difficulty with the rollover feature. Everything works fine until I move my mouse OFF of the image. The text disappears for a second, then comes right back even when my mouse is not on the image. I have to roll over the images several times before the text will disappear.

Has anyone else had this problem?

Thank you for your help in advance!

Rob
Userlevel 6

Hi @Katy_Kruse could you link to the page or DM a link and I can take a look for you.

M

Hi

I’m also having some difficulty with the rollover feature. Everything is going well when I hover over the image and leave the image to the right or to the left. However, when I leave the image going up or down, the second image will reappear and stay.

Does anyone know how to solve this?
Thank you in advance!

Rob
Userlevel 6

hey @Martijn happy to take a look for you. Could you share the URL for your page?

M

Hi @Rob, the issue has been solved. But thanks anyway!

Rob
Userlevel 6

My pleasure! Glad you got it fixed 🙂

W

Hi Rob,

Is it possible to create the image change/overlay on Button Click instead of on hover?

Want to create exactly like this effect https://goo.gl/GFu8NE

Was by Unbounce support to ask you if the script would need to be modified.

Thanks
Aden

N

Hi,
I am having an issue where I am seeing this at the bottom of the page under the footer:

/* Unbounce Community :: Tips & Scripts :: Add Tooltips and Rollover Images in Unbounce TS:0002-04-046 *********************** Do not remove this section. It helps our team track useage of external workarounds. */

Is there a way to remove this?

J

Hey @Rob,
I’m using your script on my page. It was working fine then all of a sudden stopped working properly. It’s showing the box on load and then doesn’t show again on hover. The page is https://www.abbyy-finereader.com/ in the “Pricing” section. If you could let me know what could be causing and a potential solution it would be greatly appreciated.
Thanks,
James

Rob
Userlevel 6

Hi @JamesN nice use of workarounds on that page! I’ve had a look and I believe the issue with the tooltip is being caused because of the functionality or the tabbed section script. The tooltip code will hide the box on page load, however the tabbed section also unhides the content. So what I believe is happening is that when the pricing link is clicked all the content in the box is shown including the hidden box for the tooltip.

You could try adding a line of code to the tabbed section script to make sure the tooltip box stays hidden (or technically gets re-hidden after showing the tabbed section). Something like this might work: https://www.screencast.com/t/Ws0P37Qy7sB

Another option would be to use the tooltip library through jQuery https://jqueryui.com/tooltip/ This would require some basic javascript knowledge though to get up and running.

Hope this helps!

J

Hey @Rob,
I tried the line of coding to the tabbed section. It re-hid the tooltip box, however it wouldn’t reveal on rollover. I don’t really have any knowledge in javascript, but I’ve currently figured out a way to get it to somewhat work the way I had intended by playing with the code from the site you linked. I’ll have to have one of my coworkers (who knows javascript) double check what I did to make sure it won’t mess anything up or has any ideas on making it look “prettier”.

Thank you for your quick response and suggestions!

James

P

Hi @Rob Found this thread really helpful. I have implemented a test version of the rollover functionality at the following page…
http://unbouncepages.com/fluxx-sandbox-image-rollover-effect/

When viewed on a laptop device with a mouse everything works perfectly in that as I move the mouse pointer over the different images only one of them ever shows the rollover state information.

However, when I view the page on my mobile (iPhone 6) when I tap any of the images the rollover state information appears for that image but when I then tap another image the rollover information on the previously tapped image does not disappear. I end up with all images showing the rollover state. Desire would be to have same as desktop whereby only one of the images is ever showing the rollover state information.

Can you please check my code and help me to resolve?

Many Thanks
Peter

Rob
Userlevel 6

Hi @peterhay I didn’t include the full tap functionality in the original script, so this isn’t something that’s currently possible with the workaround as it is now. I’ll try and find the time to add this functionality though when I can as I can certainly see the value in having some different functionality for the mobile experience. Thanks for leaving that feedback here Peter! Sorry I don’t have it built into the workaround at the moment. I’ll do my best to add it though when I can find the time.

Regards

P

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

Rob
Userlevel 6

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.

O

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

Rob
Userlevel 6

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?

O

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.

Rob
Userlevel 6

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 🙂

Reply


Terms & ConditionsCookie settings