Tooltips in Webflow with tippy.js

Tooltips are a way of enhancing your website's user experience (UX) by providing contextual information without cluttering up the user interface (UI).

In this article, we'll show you how to add tooltips easily to your Webflow projects using tippy.js, a lightweight and powerful JavaScript library.

What is tippy.js?

tippy.js is a lightweight JavaScript library for creating customizable tooltips. Built on Popper.js, it offers optimal performance and flexibility. With tippy.js, you can easily add tooltips to your HTML elements and customize them to suit your needs.

Why use tippy.js with Webflow?

On Webflow, there is no native way of creating "real" tooltips. It is possible to do so by creating the basic tooltips, but this requires animation.

However, to add tooltips to the tool, tippy.js is an excellent choice for several reasons:

1. Easy integration: tippy.js is simple to integrate.
2. Customization: You can customize the tooltips to keep the design consistent with that of your site.
3. Performance: Lightweight and fast, tippy.js will have no impact on the loading speed of your pages.
4. Flexibility: Compatible with different types of content and interactions.

Step by step: Adding tippy.js to your Webflow project

Follow these simple steps to integrate tippy.js into your Webflow project and start adding tooltips.

1. Include tippy.js in your Webflow project

First of all, you need to include the CSS and JavaScript files from tippy.js in your project. To do this, go to your page settings and scroll down to the Custom Code tab.

Add the CSS link and JavaScript scripts to the Head Code and Footer Code sections respectively:

<!-- Ajoutez ce lien dans la section Head Code -->
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css">

<!-- Ajoutez ces scripts dans la section Footer Code -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

2. Add tooltips to your elements

Now that tippy.js is included in your project, you can start adding tooltips to your HTML elements. To do this, we'll add the custom attribute data-tippy-content to the element parameters.

For example, to add a tooltip to a button, follow these steps:

1. Add a button to your page
2. Select the button and go to its Settings.
3. Scroll down to the custom attributes section
4. Add a new attribute with data-tippy-content as name and the text of your tooltip as value.

Here is an example of a button with a tooltip, it has as name: data-tippy-content and as value: Formation Webflow Gratuite en live tous les Jeudis.

3. Initialize tippy.js

For tooltips to appear, you need to initialize tippy.js.

To do this, add the initialization script to the custom code section (before body Tag) of your Webflow page.

<script> tippy('[data-tippy-content]'); </script>

4. Customize your tooltips

tippy.js offers a wide range of customization options. You can configure the animation, theme, appearance delays and much more.

Find all the tippy.js documentation you need to add advanced functionalities to your tooltip and match your design.

For example, here is an example of a more personalized button below

Here are the custom attributes for this button:

• data-tippy-followCursor="horizontal"
• data-tippy-followCursor="digidop"
• data-tippy-duration="300"

Here is the CSS code to create the "digidop" theme:

<style>
.tippy-box[data-theme~='digidop'] {
  background-color: #FCD33B;
  color: #101010;
}
.tippy-box[data-theme~='digidop'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #FCD33B;
}
.tippy-box[data-theme~='digidop'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: #FCD33B;
}
.tippy-box[data-theme~='digidop'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: #FCD33B;
}
.tippy-box[data-theme~='digidop'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: #FCD33B;
}
</style>

‍

Conclusion

By following these simple steps, you can easily add elegant, customized tooltips to your Webflow projects with tippy.js. Not only does this enhance the user experience, it also adds a professional touch to your site.

Feel free to explore tippy.js options further to get the most out of this powerful library.

Discover other useful javascript libraries :

• Lenis Smooth Scroll
• GSAP x Webflow
• Splide JS Guide