Our shop section is coming soon, watch for updates! Shop now
Guide

Tooltips

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

Hi everyone!

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 </head> 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 </body> 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>
Maciej
Details
Tooltips
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.
Preview ProjectClone Project

Discussion

Other Guides

Guide
Date Picker
Kevin Fogarty
Guide
Lightbox Galleries
Noah
News, Updates & Clonables

Join the newsletter for updates

Join 600+ webflow community members.
Welcome to the club. Cool stuff coming your way.
Oops! Something went wrong while submitting the form.