Return to articles
How to add hover tooltips in webflow
Tutorials

How to add hover tooltips in webflow

I prepared an easy to use extension to Webflow, that lets you add a simple generic tooltip to any element without leaving the Designer interface.

January 5, 2019

I prepared an easy to use extension to Webflow, that lets you add a simple generic tooltip to any element without leaving the Designer interface.

Read more here: http://tooltipster-for-webflow.webflow.io/

Step 1: Custom code

Paste the following code into the "Custom code" section inside Webflow Site settings: At the end of the tag


<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/iamceege/tooltipster/master/dist/css/tooltipster.bundle.min.css"><link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/iamceege/tooltipster/master/src/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.css">

Before tag:

<script src="https://cdn.rawgit.com/iamceege/tooltipster/master/dist/js/tooltipster.bundle.min.js"></script><script src="https://cdn.rawgit.com/maciejsaw/tooltipster-for-webflow/master/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

  • Add an attribute tooltipster="top"
  • Add title="Your tooltip text" attribute with your content

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"

Don't forget to publish your website.


<style>
.tooltipster-sidetip .tooltipster-content {  
color: #000000;  
line-height: 18px;  
padding: 6px 14px;}
</style>
ABOUT THE AUTHOR

Enjoyed this read?

Stay up to date with the latest video business news, strategies, and insights sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.