Tooltip:
A tooltip is generally used to indicate hints (extra information) about something when the user moves the mouse pointer over an element.
We can use either bootstrap tooltip plugin or we can create our own tooltip using html and css easily.
Custom Tooltip Code:
Html:
<!DOCTYPE html>
<html>
<head>
<title>Custom Tooltip</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="text-align:center;">
<div class="container">
<h2>Custom Tooltip:</h2>
<a class="custom-tooltip">Hover over me to see tooltip
<span class="tooltipbar">Custom Tooltip </span>
</a>
</div>
</body>
</html>
I used container element <a> and include the "custom-tooltip" class to it. At the point when the user moves mouse over this <a>, it will show the tooltip content. And the tooltip content is placed inside span element with class="tooltipbar".
CSS:
.container{border:3px solid grey;max-width:500px;margin:0 auto;width:100%;padding:20px 0px;background:#D9DDE2;}
.container>h2,p{padding-bottom:10px;text-align: center;}
.custom-tooltip {
position: relative;
display: inline-block;
}
.custom-tooltip .tooltipbar {
visibility: hidden;
width: 170px;
background-color: #2D7581;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 14px 0px;
position: absolute;
z-index: 1;
bottom: 120%;
left:50%;
margin-left: -60px;
}
.custom-tooltip:hover .tooltipbar {
visibility: visible;
}
.custom-tooltip .tooltipbar::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
right: 15%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #2D7581 transparent transparent transparent;
}
The tooltipbar class holds the tooltip text. It is hidden by default, and will be visible when user will move mouse over (hover) <a class="custom-tooltip"> tag .
You can check the live working from this link https://jsfiddle.net/4bbs2863/9/
0 Comment(s)