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-ARIA1atomiks. 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
References
[…] Awesome tooltips using Tippy.js […]