Text Hover-Over Tooltip

Adding in a tooltip to text or div elements can be done in just a couple of minutes with a small amount of custom code.

First, we're going to add in the scripts, JS Settings, and the styling links. We can either add these to the page settings if we only want the tooltip on a certain page, or to the page settings if we want them on multiple pages throughout your site.

Add this code into the <head> section of either the page settings or site settings.

<link rel="stylesheet" href="https://unpkg.com/tippy.js@4/themes/light-border.css"/>

Now we're going to add the javascript. Add this code to the </body> custom code section of either the page settings or your site settings.

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<script>
tippy('.tooltip', {
animation: 'fade',
duration: 200,
arrow: true,
delay: [0, 50],
arrowType: 'sharp',
theme: 'light-border',
maxWidth: 220,
interactive: true,
})
</script>

The styling parameters can be tweaked as needed, such as removing the arrow, changing the in and out delay, the max width, and more.

The most important thing is the class you decide to use for elements you add tooltips to. Currently the class is set to '.tooltip', meaning that any element that you add the class of tooltip to will show up with the tooltip. You can give this class to any element, not just text or <span> elements. You can also change this class to whatever you want, but just make sure to use the same class that is the script to your elements.

‍

Now that we have added all the custom code need, all we need to do is add the tooltip text. To do this, we can simply add the text content as a custom attribute in the element settings.

Go to the element settings of the element you've added the 'tooltip' class to and find the Custom <div> attributes: section.

Click the + button and add in data-tippy-content as the name. For the value, add in whatever text you want to show up in the tooltip.
‍

Now you can save the attribute, publish your site and text the tooltip. You'll see that I've also added in a dashed underline to the element that triggers the tooltip, just to make it more obvious that the text has more content on hover.