HTML Tooltip: Syntax, Usage, and Examples

In HTML, a tooltip is a small pop-up box that appears when the user hovers over an element, typically providing additional information or context. You can create a simple HTML tooltip using the title attribute.

How to Use an HTML Tooltip

The most common way to create a tooltip in HTML is by using the title attribute. When a user hovers their mouse over an element with this attribute, the browser shows the value as a tooltip.

<p title="This is a tooltip">Hover over this text to see the tooltip.</p>

In this example:

• The title attribute holds the tooltip text.
• When the user moves the mouse over the paragraph, a native tooltip appears with the message “This is a tooltip.”

This method works on most HTML elements, including <a>, <span>, <div>, <img>, and form elements like <input>.

When to Use HTML Tooltips

HTML tooltips are useful for enhancing user experience by providing subtle hints or explanations. You should use tooltips when you want to offer extra context without cluttering the interface. Here are some common use cases:

1. Explaining Form Fields

Tooltips can clarify what a user should input in a form field, especially when the label is short or ambiguous.

<input type="text" title="Enter your full legal name">

In this case, the title attribute acts as a hint that pops up on hover, making it clear that users should include their full name.

2. Describing Abbreviations

Tooltips are useful for clarifying abbreviations or acronyms that might not be familiar to all users.

<abbr title="HyperText Markup Language">HTML</abbr>

Here, the tooltip helps explain what “HTML” stands for without adding text to the page layout.

3. Enhancing Navigation

In navigation menus, you can use tooltips to give users more insight into where a link leads or what it does.

<a href="/settings" title="View and change your account settings">Settings</a>

A simple tooltip in HTML like this helps make navigation more intuitive without overwhelming the design.

Examples of Tooltips in HTML

Here are a few different examples of how to implement a tooltip in HTML, each showcasing a different element or context.

Tooltip on an Image

You can use the title attribute to display a tooltip when users hover over an image.

<img src="profile.jpg" alt="Profile Picture" title="This is your profile picture">

This example helps users understand the image's purpose or identity with a tooltip.

Tooltip with a Button

Adding a tooltip to a button can make actions clearer, especially if the button icon isn’t self-explanatory.

<button title="Click to submit the form">Submit</button>

This gives extra reassurance about what will happen when the button is clicked.

Tooltip in a Table

When dealing with tables full of abbreviations or data points, tooltips make it easier for users to understand without cluttering the table.

<td title="Gross Domestic Product">GDP</td>

Now users can hover to see what GDP means, improving clarity without disrupting layout.

Learn More About Tooltips in HTML

Styling Tooltips with CSS and JavaScript

While the title attribute provides a basic tooltip in HTML, it’s limited in customization. If you want more control—such as colors, font size, or positioning—you’ll need to create a custom tooltip using CSS (and optionally JavaScript).

Here’s a basic CSS tooltip:

<style>
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 160px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Position above the element */
  left: 50%;
  margin-left: -80px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">This is a styled tooltip</span>
</div>

In this example:

• The .tooltiptext span is hidden by default.
• When the user hovers over the .tooltip container, the tooltip appears with a fade-in effect.

This approach provides much more design flexibility than the standard title attribute tooltip in HTML.

Tooltip Positioning

Custom tooltips can be positioned anywhere relative to the hovered element—above, below, left, or right. By adjusting the top, left, right, and bottom properties in CSS, you can control exactly where the tooltip appears.

For example, placing a tooltip to the right:

.tooltip .tooltiptext {
  bottom: auto;
  left: 110%;
  top: 50%;
  transform: translateY(-50%);
}

JavaScript-Enhanced Tooltips

JavaScript can add even more interactivity to your tooltips. For instance, you might want the tooltip to appear on focus (for keyboard navigation), follow the mouse pointer, or show after a delay.

Here's a very simple example using JavaScript to show a tooltip on focus:

<input type="text" id="email" aria-describedby="emailHelp">
<small id="emailHelp" style="display: none;">We’ll never share your email.</small>

<script>
  const input = document.getElementById('email');
  const helpText = document.getElementById('emailHelp');

  input.addEventListener('focus', () => {
    helpText.style.display = 'block';
  });

  input.addEventListener('blur', () => {
    helpText.style.display = 'none';
  });
</script>

This tooltip only appears when the user focuses on the field and disappears when they leave it.

Accessibility and Tooltips

Native tooltips created with the title attribute aren’t always reliably accessible to all users, particularly those using screen readers or keyboard navigation. To improve accessibility:

• Use aria-describedby to link tooltips with their target elements.
• Avoid relying solely on hover interactions—use focus as well.
• Make sure tooltips have sufficient contrast and are readable on all screen sizes.

Here’s an example of an accessible tooltip:

<button aria-describedby="deleteTip">Delete</button>
<span id="deleteTip" class="visually-hidden">Deletes the selected file permanently</span>

You’d style .visually-hidden using CSS to hide it visually but keep it accessible to screen readers.

Limitations of the Title Attribute

While the title attribute offers a quick way to create a tooltip in HTML, it comes with several limitations:

• Tooltip appearance varies across browsers and can't be styled.
• Screen readers might ignore the title or read it at inconvenient times.
• Tooltips may not appear on mobile devices (there’s no hover state).

For anything beyond simple text hints, custom tooltips are the better option.

Tooltip Libraries and Frameworks

If you don’t want to build custom tooltips from scratch, JavaScript libraries and frameworks offer ready-made components:

• Tippy.js: A lightweight tooltip library with animations and positioning.
• Bootstrap: Includes tooltip components that you can trigger via data attributes.
• Material UI (for React): Provides customizable tooltip components with built-in accessibility.

Example with Bootstrap:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Hover me
</button>

To use this, you'd also include Bootstrap’s JavaScript bundle and initialize tooltips with:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.forEach(function (tooltipTriggerEl) {
  new bootstrap.Tooltip(tooltipTriggerEl);
});

Responsive Tooltip Behavior

Designing for mobile devices introduces a challenge: hover states don’t exist on touchscreens. To make tooltips work on both desktop and mobile:

• Trigger tooltips on click or focus, not just hover.
• Allow tooltips to be dismissed with a tap.
• Place tooltips so they don’t cover other interactive elements.

This ensures your tooltip HTML implementation works well across all devices and interaction types.

By now, you’ve seen that creating a tooltip in HTML can be as simple as using a title attribute or as flexible as building a custom component with CSS and JavaScript. Whether you’re labeling icons, explaining form fields, or building advanced UIs, tooltips improve clarity without overwhelming the user interface.

Tooltips might seem small, but done right, they improve every interaction.