How To Add Tooltips In HTML & CSS

Tooltip is a way used in HTML for displaying some extra details about the particularly selected element. This can be done on the mouse hover effect whenever the user drags the mouse over an element that is using a tooltip to display particular information about that element.

Tooltip is used as an inline element like div, periodically with class tooltip text. One can set a place to that tool-tipped text by using CSS, which supports us to represent some style and position to our tooltip.

Add Tooltips in HTML & CSS

To add tooltips you need to create two files one is index.html and one is style.css or you can add CSS in the HTML file as well. so, let’s start.

HTML Code.

<div>Here is an examples of a <a class="tooltip" href="#">Tooltip<span class="classic">This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a></div>

CSS Code

<style>
.tooltip {position: relative;}
.tooltip span {
 margin-left: -999em;
 position: absolute;
}
.tooltip:hover span {
 border-radius: 5px; 
 position: absolute; left: 1em; top: 2em; z-index: 99;
 margin-left: 0; width: 250px;
}
.classic { padding: 0.8em 1em; 
}
* html a:hover { background: transparent; }
.classic {background: #f3f4fe; border: 1px solid green; }
</style>

Read More: Add Tooltips In HTML & CSS