Webflow Booster

Tooltips Booster

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

Add this in seconds with the Boosters app, or install it manually with the instructions below.

Getting Started 🫧

Elevate your webpage with the Webflow Tooltips Booster, an effective booster that makes your designs more informative and user-friendly. Tooltips provide users with additional context and guidance and are interactive and customizable. Follow the simple instructions below, or install the official Boosters App for the most simple install and setup possible.

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.

<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-tooltip@1.1/dist/tooltip.min.js"></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.

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 followed the steps above and have added both the script and the attributes, you can publish your page. View your live staging domain to test the Booster in action.

Boosters App

Add this booster + more with the official webflow application.

Install Booster Application
*Official Webflow booster application