Tooltip.js

Dead simple tooltips, powered by Popper.js

Tooltip.js

Since Popper.js is an engine, we wanted to provide a library that shows you how you can use it in the real world.

Tooltip.js can create, show, hide and toggle tooltips. It's API is almost identical to the one used by Bootstrap for their tooltips, if you know Bootstrap, you already know Tooltip.js!

It just works

Hover me to see 4 tooltips!

The available placements are the same you are used to with Popper.js:

new Tooltip(referenceElement, {
    placement: 'top', // or bottom, left, right, and variations
    title: "Top"
});

Manually triggered

You can show, hide or toggle a tooltip programmatically:

const instance = new Tooltip(referenceElement, {
    title: "Hey there",
    trigger: "click",
});
instance.show();

Ready to start?

Visit our GitHub page to know how to get Tooltip.js and to learn more about it.