css tooltip a hover

8/09/2021  •  1993 views
 
a.tip {
 border-bottom: 1px dashed;
 text-decoration: none
}
a.tip:hover {
 cursor: help;
 position: relative
}
a.tip span {
 display: none
}
a.tip:hover span {
 border: #c0c0c0 1px dotted;
 padding: 5px 20px 5px 5px;
 display: block;
 z-index: 100;
 background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
 left: 0px;
 margin: 10px;
 width: 250px;
 position: absolute;
 top: 10px;
 text-decoration: none
}
<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>
 English / Indonesian