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.1.0/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-tooltipand Value:true. - Add the attribute Name:
fb-tooltip-animationand Value:scale. - Add the attribute Name:
fb-tooltip-messageand Value:Your Message. - Add the attribute Name:
fb-tooltip-positionand Value:right. - Add the attribute Name:
fb-tooltip-show-delayand Value:100. - Add the attribute Name:
fb-tooltip-themeand Value:light. - Add the attribute Name:
fb-tooltip-triggerand Value:hover.
Not all attributes are required, and when an attribute is missing we will provide the default behaviour.
3. 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.
Did you find this helpful? 💕
Your support means the world to us! In just 10 seconds, you can make a big difference:
- Leave a like on our Free Webflow Booster App.
- Share what you built with us on Twitter! We re-post to thousands!
Thank you for being awesome! 🌟
