The tooltip can be of four types. lefttip,righttip, bottomttip and toptip.
The properties can be defined in in all tooltip classes.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.lefttip {
top: -5px;
right: 105%;
}
.righttip {
top: -5px;
left: 105%;
}
.bottomtip {
content: " ";
position: absolute;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px;
/* Use half of the width (120/2 = 60), to center the tooltip */
}
.toptip {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Use half of the width (120/2 = 60), to center the tooltip */
}
</style>
</head>
<body style="text-align:center;margin-top:60px">
<div class="tooltip">Tab over me(Right)
<span class="tooltiptext righttip">Right text</span>
</div>
<div class="tooltip">Tab over me(Left)
<span class="tooltiptext lefttip">Left text</span>
</div>
<div class="tooltip">Tab over me(Top)
<span class="tooltiptext toptip">Top text</span>
</div>
<div class="tooltip">Tab over me(Bottom)
<span class="tooltiptext bottomtip">Bottom text</span>
</div>
</body>
</html>
The properties can be defined in in all tooltip classes.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.lefttip {
top: -5px;
right: 105%;
}
.righttip {
top: -5px;
left: 105%;
}
.bottomtip {
content: " ";
position: absolute;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px;
/* Use half of the width (120/2 = 60), to center the tooltip */
}
.toptip {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Use half of the width (120/2 = 60), to center the tooltip */
}
</style>
</head>
<body style="text-align:center;margin-top:60px">
<div class="tooltip">Tab over me(Right)
<span class="tooltiptext righttip">Right text</span>
</div>
<div class="tooltip">Tab over me(Left)
<span class="tooltiptext lefttip">Left text</span>
</div>
<div class="tooltip">Tab over me(Top)
<span class="tooltiptext toptip">Top text</span>
</div>
<div class="tooltip">Tab over me(Bottom)
<span class="tooltiptext bottomtip">Bottom text</span>
</div>
</body>
</html>
Css:- tooltips selector
Reviewed by Network security
on
May 23, 2019
Rating:
Reviewed by Network security
on
May 23, 2019
Rating:
No comments: