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.
Read Also: Social Media Buttons With Tooltip on Hover
Using a tooltip on your website pages or posts helps to do more relations with the user because it gives short information of included elements.
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>From all the above code and information, we realized that Tooltip is a component in HTML used to show some related information or short descriptions of a specified element. As per the user’s selection, they can select where this tooltip should occur as respective to the element. Position value will be right, left, top, or bottom.