Open In App

How to Create a Tooltip with only HTML?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

A tooltip is a small box that appears when a user hovers over an item on a website or software application. This article discusses the importance of creating simple, accessible tooltips in web design without depending on JavaScript or CSS frameworks. We will use only HTML elements, specifically title attribute, to develop effective tooltips to improve user interaction.

tooltip
creating tooltip using title attribute

Approach to Creating Tooltip Using HTML

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 it.

Syntax

<HtmlElement title="tooltip text">

Example: This example demonstrates how to create a simple tooltip using the title attribute on buttons within an HTML document.

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">
        <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>
    </div>

</body>

</html>

Output


Next Article
HTML Introduction

G
ghuleyogesh
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox