Plain JavaScript Tooltip

A tooltip is a small, informational popup that displays when a user hovers over an element, such as a button or text. More specifically, the purpose of a tooltip is to provide additional information or clarification about the element in question.

This article will demonstrate the tooltip using plain JavaScript.

How to Create a Plain JavaScript Tooltip?

To create a tooltip using JavaScript, use the “mouseover” and “mouseout” events. Follow the below-given examples for a better understanding.

Example 1: Tooltip Using JavaScript

In the given example, we will create a tooltip in pure JavaScript and also style the tooltip using the “style” attribute.

First, create a text where we want to show a tooltip on the mouseover event:

<h5 id="text">Linuxhint</h5>

Get the text where the tooltip will appear using the “getElementById()” method:

var lh = document.getElementById("text");

Now, call the “addEventListener()” method by passing the “mouseover” event and a function() as a parameter. In the defined function, first, we will create a tooltip by creating a “div” element, set the text that will be shown on the hover, and setting some styling of the tooltip using the “style” attribute. Finally, add the tooltip using the “appendChild()” method:

lh.addEventListener("mouseover", function() {

var tooltip = document.createElement("div");

tooltip.innerHTML = "A best website to learn skills";

tooltip.style.visibility = "visible";

tooltip.style.position = "absolute";

tooltip.style.backgroundColor = "rgb(107, 101, 101)";

tooltip.style.padding = "5px";

tooltip.style.borderRadius = "3px";

tooltip.style.color = "white";

tooltip.style.left = "50%";

tooltip.style.width = "200px";

document.body.appendChild(tooltip);

});

Here, utilize the “mouseout” event that will remove the tooltip while the cursor will away from the text:

lh.addEventListener("mouseout", function() {

document.body.removeChild(tooltip);

});

Output

Example 2: Tooltip Using JavaScript With CSS

You can also create a tooltip in JavaScript with CSS.

To do so, create an area to show the text of the tooltip using the <span> tag and assign an id “#myTooltip”:

Get the references of the text and the tooltip using the “getElementById()” method:

var lh = document.getElementById("text");

var tooltip = document.getElementById("myTooltip");

Call the tooltip on the “mouseover” event by setting the text in the function using the “innerHTML” property:

lh.addEventListener("mouseover", function() {

tooltip.style.visibility = "visible";

tooltip.innerHTML = "A best website to learn skills";

});

Hide the tooltip on the “mouseout” event by setting the “visibility” property to “hidden”:

lh.addEventListener("mouseout", function() {

tooltip.style.visibility = "hidden";

});

Create an id “#myTooltip” in the style sheet that will style the tooltip:

#myTooltip {

visibility: hidden;

width: 200px;

z-index: 1;

background-color: rgb(107, 101, 101);

text-align: center;

color: white;

padding: 5px 0;

border-radius: 3px;

left: 50%;

}

As you can see that the tooltip has been successfully implemented on the text:

How to Create Tooltip Using HTML and CSS?

You can also create a tooltip without JavaScript. In the HTML file, create the text “Linuxhint”, where the tooltip will be shown while hovering on it. Create <span> element to set the text for the tooltip inside the heading/text <h5> tag:

<h5 class="tooltip">

Linuxhint

<span class="tooltiptext">

A platform to learn skills

</span>

</h5>

In the style sheet, create a class or an id that will be assigned to the HTML elements. Here, we will create a class “tooltip” that is assigned to the heading:

.tooltip {

position: relative;

display: inline-block;

}

Define a class “tooltiptext” to style the text of the tooltip and assign it the HTML “<span>” tag:

.tooltiptext {

visibility: hidden;

width: 150px;

background-color: rgb(107, 101, 101);

color: #fff;

text-align: center;

padding: 5px 0;

border-radius: 3px;

position: absolute;

z-index: 1;

bottom: 125%;

left: 50%;

margin-left: -60px;

opacity: 0;

transition: opacity 0.3s;

}

Set “hover” effect with the “tooltip” class to show the tooltip on the hover effect:

.tooltip:hover .tooltiptext {

visibility: visible;

opacity: 1;

}

Output

We have compiled all the necessary instructions relevant to the plain JavaScript tooltip.

Conclusion

To create a tooltip using JavaScript, use the “mouseover” and “mouseout” events, which shows the tooltip on hover on the element and hides it when the mouseout event is triggered. For styling the tooltip, use the “style” attribute in JavaScript. In this article, we demonstrated the best possible examples of creating a tooltip using plain JavaScript, JavaScript with CSS, and a tooltip without JavaScript.