Awesome tooltips using Tippy.js

I’m planning a more extended tutorial about how to do tooltips from scratch, but, on this occasion let’s take a look at Tippy.js, a small but powerful Javascript library to create astonishing tooltips with just a few lines.

As it is described on its own page, this library is not only fast but also universal – works with a mouse, keyboard and touch inputs – and accessible, which means it is compatible with WAI-ARIA¹atomiks. Tippy.js.

To get more details about the library the best source is its own documentation – check out the references at the end of the article -, for now, let’s make our own example and review some features.

📍 Easy to implement

To add a tooltip to an element is as easy as define an ID and write three javascript lines.

<h1 class="title" id="example">Element with tooltip</h1>

tippy('#example', {
  content: "I have a tooltip"
});

Ignoring the custom CSS, this will be the result:

📍 Disable the arrow

By setting the arrow property as false we get only the tooltip

tippy('#btn-no-arrow', {
  content: "I don't have an arrow :(",
  arrow: false
});

📍 Customize your theme

It is possible to add a custom theme for the tooltip by defining the CSS class with the correct syntax as follows the example

.tippy-tooltip.custom-theme {
  background-color: white;
  color: black;
  font-family: Raleway, sans-serif;
  font-size: 18px;
}

In this case, custom is the name of our theme. Apply it with the theme property and the respective name as you can see on the next example

tippy('#btn-theme', {
  content: "I have a custom theme 😎",
  placement: 'bottom',
  theme: 'custom',
  arrow: false,
});

Also, you can specify the direction of the tooltip

📍 Add HTML on the tooltip

Yes, it is possible to add HTML blocks inside the tooltip.

 content: '<span class="tooltip-span">I am a span</span>',

📍 Project to play:

See the Pen Tooltips using Tippy.js by Dáger Zúñiga N. (@dagerzuga) on CodePen.default