How to Add Hover Tooltips with Tippy.js

This script uses the Tippy.js library to show a tooltip when a visitor hovers over a page element. Use it to add short explanations to buttons, icons, or terms without adding text to the page.

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.

Add tooltips to your page

1. Copy the scripts from this GitHub gist. Add unbounce_hover_tooltips_load to the JavaScripts section with placement set to Head. Add unbounce_hover_tooltips_implement as a separate script with placement set to Before Body End Tag.

2. In the script, update the buttons variable with the elements that should show a tooltip and the text for each one.

   

3. Set the tooltip style to Dark, Light, or Transparent.

   

4. Save and republish the page.

(Optional) Customize the tooltips

To style all tooltips at once, create a theme. To change individual elements, such as adding an arrow, use Tippy's data attributes. For example, the following adds an arrow to button 13:

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

The following example changes the tooltip font to Oswald at size 20: