HtmlHow-ToBeginner · 3 min read

How to Create Tooltip in HTML: Simple Guide with Examples

You can create a tooltip in HTML by adding the title attribute to an element, which shows a small popup text on hover. For more custom tooltips, use HTML and CSS to style and position the tooltip content.

📐

Syntax

The simplest tooltip uses the title attribute inside an HTML tag. When you hover over the element, the browser shows the tooltip text.

title: The text shown as the tooltip.
Any HTML element can have a title attribute.

html

<p title="This is a tooltip">Hover over me</p>

Output

Hover over the text 'Hover over me' to see a small popup with 'This is a tooltip'.

💻

Example

This example shows a custom tooltip using HTML and CSS. When you hover over the word, a styled box appears with the tooltip text.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Tooltip Example</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: #0056b3;
  border-bottom: 1px dotted #0056b3;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 6px 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.875rem;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
</head>
<body>
<p>Move your mouse over the <span class="tooltip">word<span class="tooltiptext">This is a custom tooltip!</span></span> to see the tooltip.</p>
</body>
</html>

Output

The page shows a sentence with the word 'word' underlined with dots. Hovering over 'word' displays a dark box above it with white text: 'This is a custom tooltip!'.

⚠️

Common Pitfalls

Common mistakes when creating tooltips include:

Using the title attribute but expecting styled tooltips (browsers show default style only).
Not positioning custom tooltips properly, causing them to be cut off or misplaced.
Forgetting to make tooltips accessible for keyboard users and screen readers.

Always test tooltips on different devices and browsers.

html

<!-- Wrong: Using title but expecting custom style -->
<p title="Tooltip text" style="color: red;">Hover me</p>

<!-- Right: Use CSS for custom tooltip -->
<span class="tooltip">Hover me<span class="tooltiptext">Tooltip text</span></span>

Output

The first example shows a red text with default browser tooltip on hover. The second example shows a styled tooltip box on hover.

📊

Quick Reference

Tips for creating tooltips in HTML:

Use title for simple tooltips with default style.
Use HTML and CSS for custom styled tooltips.
Position tooltips carefully using CSS position and transform.
Ensure tooltips are accessible by keyboard and screen readers.
Test tooltips on different screen sizes and browsers.

✅

Key Takeaways

Use the title attribute for quick and simple tooltips in HTML.

For custom styles and better control, create tooltips with HTML and CSS.

Always position tooltips carefully to avoid clipping or misplacement.

Make tooltips accessible for all users, including keyboard and screen reader users.

Test tooltips on multiple devices and browsers to ensure consistent behavior.