Is essential to add tooltip to make web page more professional and understandable
The simplest way can we add tooltip is use html inline element <span>
We will add the tool in div and tooltip text(tool description) in the span
Toll description will be always hide ( display none in css) until the user hover the tool text , then it will show the tool
A simple example
Tooltip Example. This line has tooltip!
This is the tooltip Text!
The example code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Example</title>
<style>
.tooltip-main {
background-color: blue;
color: white;
position: relative;
}
.tooltip-text {
position: absolute;
display: none;
background-color: wheat;
padding: 5px;
border-radius: 3px;
}
.tooltip-main:hover + .tooltip-text {
display: inline;
}
</style>
</head>
<body>
<div>
<div class="tooltip-main">Tooltip Example. This line has tooltip!</div>
<span class="tooltip-text">This is the tooltip Text!</span>
</div>
</body>
</html>