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.

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>

If you want to learn in detail click how to Add Tooltips in HTML & CSS

TO see live Demo

I hope you like this post. If you have any question please discuss below help to improve. Thank you.

Comments

[Jakub T. Jankiewicz]

You can create tooltip with single element using data attrubute and pseudo element.

[elinabey]

Simple and easy