Learn how to add beautiful tooltips to your Webflow projects using tippy.js library.
This is a much more scalable, effective and lightweight solution when compared to using interactions to manage your tooltips.
This solution is available in a few formats via Webflow community members, if you want another approach browse the work from Noah Raskin
To add this into your project, follow the simple steps and add the custom code into your project or page settings.
1. Add an element to your page for users to hover and activate tooltips on.
Tippy will work on any element and can use either attributes or the script to control specific features. All you need is the scripts included in this guide, and to add the class 'tippy' on your elements.
The script includes our default settings for your tippy setup, you can choose to edit from these, or apply custom attributes to achieve unique tooltips for different elements. Here are some of the most popular attributes used with Tippy, but you can dive deeper through their documentation for all features.
data-tippy-content = "Add your message"
data-tippy-placement = "top"
data-tippy-animation = "scale"
data-tippy-arrow = "true"
2. Add the custom attributes to your element
Navigate to the settings of this element and add the custom attributes you require. By default, you will need to add the attribute:
data-tippy-content = "Message Here" this is where we can include the message to show users on hover.
3. Include the custom scripts & code.
Be sure to add the custom script into your Before </body> tag custom code area.
4. Add element specific tooltips
Overwrite the default settings by adding your own attributes to any element.
5. Publish & Test
Since these tooltips use custom code, you'll need to publish your page to view and test. Something not working? Make sure to have the class name added to the element, and ensure it matches exactly with the script.