【HTML】Basic Tooltips | Displaying Hints on Hover Using the title Attribute

This tutorial explains how to use the HTML title attribute for simple tooltip displays, and how to create custom tooltips using CSS and JavaScript.

🔹 Basic Code

<p>Hover over this<span title="Additional information"> part</span> to see the tooltip.</p>

💻 Full Working Code (Just copy and paste to test)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tooltip Demo</title>
  <style>
    body {
      font-family: 'Segoe UI', Meiryo, sans-serif;
      padding: 20px;
      text-align: center;
      line-height: 1.6;
    }
    .tooltip-demo {
      color: #1e88e5;
      font-weight: bold;
      cursor: help;
      border-bottom: 1px dashed #1e88e5;
      padding-bottom: 1px;
    }
    .tooltip-demo:hover {
      color: #0d47a1;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Tooltip Demo</h2>
    <p>Hover over this<span class="tooltip-demo" title="The tooltip is showing! Additional description text appears here."> blue text</span> to see the tooltip.</p>
    <p>This demo shows the default behavior of the HTML title attribute tooltip.</p>
  </div>
</body>
</html>

🧩 Basic Characteristics of Tooltips

Tooltips using the title attribute are a standard browser feature that can be implemented without JavaScript. They appear about 1 second after hovering over an element and disappear when the mouse is moved away or clicked.

Advantages include support across all major browsers, and accessibility features like screen reader support. However, customization of the design is not possible.

🎯 Creating Custom Tooltips

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Custom Tooltip</span>
</div>

You can create custom tooltips using only CSS and HTML. This method allows more flexibility in design and you can add animation effects. However, without JavaScript, dynamic positioning adjustments may be limited.

📚 Practical Usage Examples

Form input hints: <label>Password: <input type="password">?</label>

Term explanations: HTML is a language used to create web pages.

These examples show how you can effectively use tooltips to enhance user interface usability.

⚠️ Important Note: Tooltips vs Links

Pure Tooltip Functionality

The method described in this article is a pure tooltip functionality without link behavior. The  is:

Does not navigate to a page when clicked
Only used for displaying information on hover
Visual styling (such as color changes) is done with CSS

<!-- No link functionality -->
<span class="tooltip" title="Description">Hover target</span>

<!-- Link with tooltip -->
<a href="page.html" title="Description">Clickable link</a>

Combining Tooltips with Links

To create a tooltip with a link, simply add the title attribute to the <a> tag:

<a href="#" class="tooltip-link" title="You will be redirected to the detailed page">
  Clickable link
</a>

<style>
.tooltip-link {
  color: #0066cc;
  text-decoration: underline;
}
</style>

Copied!