Tooltip is extremely useful when it comes to providing basic details about the functionality of an element. You may have seen on various websites where they have a symbol of question mark (?) right next to an element and as soon as you hover over that symbol, a small text box pops up with details about the usage of that specific element.
We are using v4 of Tippy JS in this tutorial. If you are using the latest version, then please do read the docs first.
In the following example, we have one button element and when we hover over it, we will display a tooltip using Tippy JS. Please have a look over the code example and the steps given below.
HTML & CSS
We have 2 elements in the HTML file (div and button).
The div element is just a wrapper for the button element. We are using the style attribute to center align the button element horizontally.
The button element has “Click Here” as innerText.
We have added the light.css file using the link tag. This CSS file contains all styles related to the light theme.
We have added Popper JS v1 and Tippy JS v4 using the script tag. Popper JS is required to make Tippy JS work.
We are calling the tippy() method of Tippy JS and passing the CSS selector of the button element and an options object as parameters. You can use this options object to completely customize the tooltip. You can specify the content, delay, placement, etc for the tooltip in this options object.
This is all that you need to display a basic tooltip using Tippy JS. However, there are a bunch of other options and it has a very comprehensive documentation page, so please do check it out to learn more about it.