Webflow Attribute Booster

Webflow Webflow Tooltips

Display informative tooltips when hovering or clicking on certain elements. Control their position, theme, animation style and more.

Preview Booster

Install with Boosters™

Getting Started

Add custom tooltips to any element in Webflow in seconds. Easily set the position, animation, interaction type (click or hover), timing, and more.

Enhance your website’s UX and provide users with valuable information through interactive and customizable tooltips. This guide will help you implement tooltips that offer additional context and guidance, improving user experience.

This Booster can be added directly into your Webflow projects with our free official Webflow App. You can install the official Boosters App. The Boosters app will add all the attributes and elements you need directly in your Webflow project.

Install Instructions ✍️

1. Add the booster script to your project

Copy the script source listed 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 the attributes to an element

For this Booster, attributes can be added to any element and triggered by hover, or click. Review the table below to see the available attributes so you can decide which ones are important for you. If you aren't sure how to add attributes in Webflow, you can learn more.

Add the following attributes to the 'Age Gate' element added above.

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.

View the table below for additional values and customisation settings.

Attribute Name	Attribute Value	Description
fb-tooltip	true, false	Simple on/off method for the feature
fb-tooltip-message	eg. 'Message Here'	The message that will display
fb-tooltip-animation	shift-away, shift-toward, scale, perspective	Set the animation style
fb-tooltip-position	top, bottom, right, left	Set the position of the tooltip
fb-tooltip-show-delay	eg. '300' or '300;600'	Specify the show delay for all, or in/out
fb-tooltip-theme	light, dark, material, transparent	Set the tooltips theme
fb-tooltip-trigger	hover, click	Specify the show delay for all, or in/out
fb-tooltip-arrow	rounded, sharp	Optional to display an arrow

3. Publish & Test 🚀

Once you've completed the steps above, including adding both the script and the necessary attributes, it's time to publish your page. Head over to your live staging domain to see the Booster in action. Test the tooltips feature to ensure everything is working smoothly.

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! 🌟

Boosters App

Add this booster + more with the official webflow application.

Install Booster Application

*Official Webflow booster application