How to create a tooltip with only HTML ?

Last Updated : 18 Mar, 2024

A tooltip is a small box that appears when a user hovers over an item on a website or software application. It typically contains additional information or a description related to the item, providing users with context or guidance. In this article, we will see how we can create tooltip using title attribute in HTML.

Approach

The title attribute in HTML is a simple and native way to create tooltips in HTML. When an element has a title attribute, browsers automatically display its value as a tooltip when the user hovers over the element.

Syntax:

<HtmlElement title="tooltip text">

Example: The below code uses the title attribute to create a tooltip in HTML.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Tooltip Example</title>
    <style>
        .container {
            text-align: center;
            margin-top: 50px;
        }

        .heading {
            color: green;
        }

        .button {
            display: inline-block;
            margin: 0 10px;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="container">
        <h1 class="heading">
              GeeksForGeeks
          </h1>
        <h2>
              Creating tooltip using title attribute
          </h2>
        <button class="button" 
                title="This is button 1">
              Button 1
          </button>
        <button class="button" 
                title="This is button 2">
              Button 2
          </button>
        <button class="button" 
                title="This is button 3">
              Button 3
          </button>
    </div>

</body>

</html>