How to create tooltip in html

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 site uses cookies from Google to deliver its services and analyze traffic. By using this site, you agree to its use of cookies.

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>