1<!--
2A tooltip is use to specify extra information about something when user moves cursor over an HTML element.
3-->
4
5<!DOCTYPE html>
6<html>
7<style>
8.tooltip {
9 position: relative;
10 display: inline-block;
11 border-bottom: 1px dotted black;
12}
13
14.tooltip .tooltiptext {
15 visibility: hidden;
16 width: 120px;
17 background-color: black;
18 color: #fff;
19 text-align: center;
20 border-radius: 6px;
21 padding: 5px 0;
22 position: absolute;
23 z-index: 1;
24 bottom: 150%;
25 left: 50%;
26 margin-left: -60px;
27}
28
29.tooltip .tooltiptext::after {
30 content: "";
31 position: absolute;
32 top: 100%;
33 left: 50%;
34 margin-left: -5px;
35 border-width: 5px;
36 border-style: solid;
37 border-color: black transparent transparent transparent;
38}
39
40.tooltip:hover .tooltiptext {
41 visibility: visible;
42}
43</style>
44<body style="text-align:center;">
45
46<div class="tooltip">Hover over me
47 <span class="tooltiptext">Tooltip text</span>
48</div>
49
50</body>
51</html>
52
53<!--
54I Hope it will help you.
55Namaste
56Stay Home Stay Safe
57-->