Creating Beautiful Tooltips With Tippy.js

In this tutorial, we will learn how to create beautiful tooltips with Tippy.js and JavaScript. A tooltip is usually a message which appears when one hovers over a text, button, image, etc. This message usually appears without any modifications and looks bland. Tippy.js provides a solution to beautify this tooltip.

Not only does Tippy.js provide beautification to the tooltip it also provides you the flexibility to modify it into dropdowns too for example.

Getting Started

To get started we need to add two script links to the HTML file like this:

<script src="https://unpkg.com/@popperjs/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>

These links are used when the code is in production, for the development code use this:

<script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/tippy-bundle.umd.js"></script>

We will now link the JavaScript file named index.js to the HTML file like this:

<script src="index.js"></script>

Now in the HTML file, we will add the following code:

<div style="text-align: center;vertical-align: middle;height: 100%;">
    <label id="text" style="position: absolute; top: 50%;">CodeSpeedy</label>
</div>

We use the following code to align the word CodeSpeedy in the center of the screen for better visibility.

The Output Of The HTML Code

https://drive.google.com/file/d/147VNXC27IVJ1iiGMJ9TafmZN0kZLJRJp/view?usp=sharing

 

The JavaScript File

We are going to add an EventListener to the text CodeSpeedy and listen for the mouseover event for the displaying the tooltip like this:

document.getElementById('text').addEventListener('mouseover', () => {
});

Now, this code will ‘listen’ for cursor hovering events over the text.

To generate the tooltip we will now add the following code inside the EventListener event:

tippy(document.getElementById('text'), {
    content: 'Happy coding!!',
});

Final JavaScript Code

document.getElementById('text').addEventListener('mouseover', () => {
    tippy(document.getElementById('text'), {
        content: 'Happy coding!!',
    });
});

Output for Tippy.js and Javascript

https://drive.google.com/file/d/1BKWlTiEOEKGQhjj1BPuRxLEFaSTHrIp5/view?usp=sharing

 

More About Tippy.js

Tippy.js features do not just end here. There are tons of options to beautify your tooltip! From animations to themes the tooltip can be modified as per the user’s requirements.

How to animate with Tippy.js

Tippy.js offers animations for the tooltip appearance. Some of them are shift-away, shift-toward, scale, perspective, etc.

To use animations for your tooltip you need to link the CSS file offered by Tippy.js like this:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/animations/scale.css">

Adding the animation to the code:

document.getElementById('text').addEventListener('mouseover', () => {
    tippy(document.getElementById('text'), {
        content: 'Happy coding!!',
        animation: 'scale'
    });
});

This causes the tooltip to expand in size when the cursor hovers over it. You can change the scale animation to the mentioned animations above as per your choice.

Adding Themes To Tippy.js

One can even add themes to the tooltip like this:

First, we link the themes CSS file to the HTML file by using this code:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/themes/light.css">

Finally adding the theme to the code:

document.getElementById('text').addEventListener('mouseover', () => {
    tippy(document.getElementById('text'), {
        content: 'Happy coding!!',
        theme: 'light'
    });
});

Conclusion

Tippy.js is customizable and can be used for building tooltips of different themes as required by the user. The documentation provided by Tippy.js is extensive and can be viewed here.

 

You may also be interested in the following,

Plotting A Line Graph Using JavaScript with Chart.js

JavaScript: Creating a spinner that spins when hovered on