Overview

Simple way to create tooltips in Webflow using the Tippy.js library.

‍

1. Give the element a class

Give the element where you want the tooltip to appear a class. I called mine "link".

2. Paste the code

Open Home Settings and paste the following code code (tippy.js) before the </body> tag.

Type the class name that you picked in the previous step.

 <script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>


<script>
    tippy('.link', {
});
 </script>

3. Add Custom Attribute

Go to Element Settings and add the following Custom Attribute.

data-tippy-content = "Your content"

4. Publish and enjoy!

In order for them to work you have to publish your project.