TooltipTooltip is a way to represent extra information about the content when we hover the mouse over the content. This content may be anything like text, image, div, or any other HTML tag. In most of the sites, we see that when we move our mouse mover anything like image, text, the table then a little popup opens which contains some extra information about that main content.
Note:
1. We apply tooltip on any other HTML tag.
2. Tooltip can't be used alone.
3. To use tooltip we must require 2 CSS classes
a) "tooltip" class in main HTML tag
b) "tooltiptext" class with inner <span> tag.
4. Inner <span> tag contains the tooltip message.
5. We need to write some extra CSS code for effect.
How to use Tooltip
Tooltip always applied on other HTML, In the below example I have applied tooltip on an HTML <div> div element. Let's see how
<! ------ HTML CODE ---------- >
<div class="tooltip">
This is div data, hover me to see tooltip message
<span class="tooltiptext">Message from tooptip</span>
</div>
<! ------ CSS CODE ---------- >
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 130px;
background-color: blue;
color: #fff;
text-align: center;
padding: 6px 0;
border-radius: 4px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
Note -
1. You can copy and paste the CSS code in your HTML <head> tag.
2. You can change the color of the tooltip background and tooltip message text color by the above CSS code.