How to Add Simple Tooltips in Webflow

Learn how to add tooltips to any Webflow site in seconds! 100% free for all projects

June 17, 2025

Min Read

Tutorials

Tom B

Founder

@flowbase

Overview 💭

Learn how to add beautiful tooltips to any Webflow project with this guide. This method uses attributes, offering a more scalable, effective, and lightweight solution compared to interactions. It's also always supported, delivered to your visitors by a global CDN.

Follow the simple steps below to integrate tooltips into your project. Alternatively, use our free Webflow Boosters App to add tooltips with just a single click. Click here to learn more about the Webflow Boosters App.

Instructions ✍️

1. Add the script to your project

To get started adding tooltips to your elements, first copy the script source below and add it to the <head> tag of your custom code settings. If you aren't sure about custom code in Webflow, you can click here to learn more.

<!-- Flowbase Booster [Tooltips] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-tooltip@1/dist/tooltip.min.js" type="text/javascript"</script>

‍

2. Add tooltip attributes

Attributes can be added to any Webflow element, but they’re often best applied to a link-block, as it already includes the pointer type. If you aren't sure how to add attributes in Webflow, you can learn more.

For convenience, we recommend using our free app to add tooltips with all the settings available through a simple UI. Alternatively, you can follow our guide to add them manually. Choose the method that works best for you!

Add the following attributes to the element where you want the tooltips to appear:

Add the attribute Name: fb-tooltip and Value: true.
Add the attribute Name: fb-tooltip-animation and Value: scale.
Add the attribute Name: fb-tooltip-message and Value: Your Message.
Add the attribute Name: fb-tooltip-position and Value: right.
Add the attribute Name: fb-tooltip-show-delay and Value: 100.
Add the attribute Name: fb-tooltip-theme and Value: light.
Add the attribute Name: fb-tooltip-trigger and Value: hover.

Not all attributes are required, and when an attribute is missing we will provide the default behaviour.

Publish & Test

After completing the steps and adding the script and attributes, publish your page. Go to your live staging domain to view the Booster in action and test the tooltips to ensure they are functioning correctly.