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-->
1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>tooltip demo</title>
6 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
7 <script src="//code.jquery.com/jquery-1.12.4.js"></script>
8 <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
9</head>
10<body>
11
12<p>
13 <a href="#" title="Anchor description">Anchor text</a>
14 <input title="Input help">
15</p>
16<script>
17 $( document ).tooltip({});
18</script>
19
20</body>
21</html>
22