[How-to] Tooltips on Hover Using Tippy.js

  • 2 September 2017
  • 4 replies
  • 245 views
Paul_Unbounce
Userlevel 2

Do you ever wish you knew more? Do you desire more information?

If yes, you might need super stylish, slick, and informative Javascript tooltips.

Using Tippy.js, hovering over any Unbounce page element just became an opportunity to tell your customers MORE.

Hover Demo

You can see this in action (built in Unbounce) here:
http://unbouncepages.com/javascript-tooltips-on-hover/

How to Install in Unbounce

Click Here for Instructions

🚨
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.

Step 1.

Copy the latest scripts from https://gist.github.com/paulbounce/b16fc65b8e1fe65a450eca98a92f7bdc.

unbounce_hover_tooltips_load should be placed in Javascripts with position set to Head.

unbounce_hover_tooltips_implement should be placed in a separate Javascript with position set to Before Body End.

Step 2.

Update the buttons variable in the script to define which content should have a hover effect, and what the tooltip should say.

tooltips_explainer

Step 3.

Set the style of your Tooltips as one of Dark, Light, or Transparent.

style_explainer

Step 4 (optional).

Create and implement a theme to apply styling to all tooltips, or use the data convention to add arrows and change behaviour on individual elements.

For example, the following would add an arrow to button 13:

document.getElementById('lp-pom-button-13').setAttribute("data-arrow", "true");

And the following would change the font to Oswald and the size to 20:

tooltip_font

font_imp


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

4 replies

N

Hi, I followed the steps above but the code doesnt work, it doesnt show in preview (I also tried many other codes and none of them worked, maybe it has something in common). What should I do? Any replies would be appreciated.

R

@Paul_Unbounce I followed the steps in this tutorial but the tooltips box appears on Section 5 but the button is in Section 6 of the page. Can you help me troubleshoot? Thanks.

R

Was able to figure this out by myself. The issue was because the scripts were outdated.

Use this javascript instead:

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
  // With the above scripts loaded, you can call `tippy()` with a CSS
  // selector and a `content` prop:
  tippy('#lp-pom-text-45', {
    content: 'Tooltip 1',
  });
  tippy('#lp-pom-button-53', {
    content: 'Tooltip 2 ',
     });
    tippy('#lp-pom-box-68', {
    content: 'Tooltip 3,
       });
</script>
D

Hi Russ11, 

Thanks for posting your solution here. 

I´ve tried just now and doesn´t seem to work. 

Any ideas on how to solve it?

Thanks in advance,

Dario.

Reply


Terms & ConditionsCookie settings