Hover over elements to see how tooltips appear

tooltipster="top"
tooltipster="right"
tooltipster="bottom"
tooltipster="left"
tooltipster="top-delay"
tooltipster="right-delay"
tooltipster="bottom-delay"
tooltipster="left-delay"

Click the elements to see the tooltip

tooltipster="top-on-click"
tooltipster="right-on-click"
tooltipster="bottom-on-click"
tooltipster="left-on-click"

How to use it in Webflow?

Step 1: Custom code

Paste the following code into the "Custom code" section inside Webflow Site settings:

At the end of the </head> tag


<link rel="stylesheet" type="text/css" href="https://maciejsawicki.com/tooltipster-for-webflow/tooltipster.bundle.min.css">


Before </body> tag:


<script src="https://maciejsawicki.com/tooltipster-for-webflow/tooltipster-for-webflow.js"></script>


Your custom code section should look like this:

Step 2: Custom attributes

Add tooltips in Webflow Designer by using custom attributes

You can use other directions: top, right, bottom, left

Add tooltips with a delay by adding a suffix to the attribute - for example tooltipster="top-delay"

Add tooltips on click by adding a suffix to the attribute - for example tooltipster="top-on-click"

Don't forget that clickable elements should have cursor set to "pointer", otherwise the interaction won't work on iOS.

Step 3: Publish your website

Don't forget to publish your website. Custom code only works in published version, not in Webflow preview

Boom! Tooltips will work after publish!

Help & FAQ