Tooltip property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Tooltip property</title>
<style>
/* Tooltip container */
.tooltip {
position: relative; /* Tooltip class use position:relative, which is needed to position the tooltip text as position:absolute */
display: inline-block;
border-bottom: 3px dotted black; /* dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
position: absolute; /* Position the tooltip text */
visibility: hidden;
top: -5px; /* Use the number 5 because the tooltip text has a top and bottom padding of 5px */
left: 110%;
width: 340px;
background-color: coral;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
z-index: 1;
}
/* To create an arrow that should appear from a specific side of the tooltip */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px; /*specifies the size of the arrow */
border-style: solid;
border-color: transparent coral transparent transparent;
border: 5px solid transparent coral transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<!--
tooltip : specifies extra information about something when user moves mouse pointer over an element.
tooltiptext : class holds the actual tooltip text. It is hidden by default, and will be visible on hover.
-->
<h1>Demo: Tooltip property</h1>
<h3>NOTE: Move mouse pointer over "SKILLZAM" below.</h3>
<div class="tooltip"> <strong>SKILLZAM</strong>
<span class="tooltiptext">Learn without limits (www.skillzam.com)</span>
</div>
<p>Skillzam is a CURE Platform i.e Cross-Skill, Up-Skill, Re-Skill, Expert-Skill. This skill development platform enables students, professionals and Corporate organizations to transform lives through learning. Skillzam brings flexible, affordable, industry relevant skill enhancement programs - from basic courses to advanced hands-on project implementations.</p>
</body>
</html>