Back to Blog

How to Add Simple Tooltips in Webflow

Add tool tips to your website site in seconds with the Tippy.js library

Overview 📚

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.

{{ Template "gist" "text:Before </body> tag" "id:a14e3804072cb7e88a16b6d3b89b0ce8" }}

Instructions ✍️

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.


Attributes:

Content:
data-tippy-content = "Add your message"

Placement:
data-tippy-placement = "top"

Animation:
data-tippy-animation = "scale"

Arrow:
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.

{{ Template "gist" "text:Before </body> tag" "id:a14e3804072cb7e88a16b6d3b89b0ce8" }}
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.

OTHER GUIDES & LESSONS

Boost your webflow site further.

Join Over 30,000
Creators Today

Join our newsletter list for occasional updates, products and insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join 30,000+ other creators across our communities.