The title Attribute
Show a tooltip when the user hovers over an element.
Syntax
<p title="More info">Hover me</p>The title attribute adds extra information about an element. Most browsers show this text as a tooltip when the user hovers over the element.
It works on almost any element and improves usability and accessibility.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer adds title="Submit form" to a button so hovering over it shows a tooltip with more context.
- An accessibility engineer adds title to an <abbr> element to spell out the full meaning of an abbreviation.
- A designer uses title on an icon-only link to describe its destination for sighted keyboard users who rely on tooltips.
More examples
Tooltip on a button via title
The title attribute value appears as a browser tooltip when the user hovers over the button.
<button title="Submit your registration form">Register</button>Abbreviation spelled out with title
title on <abbr> reveals the full form of the abbreviation on hover, aiding comprehension.
<p>
The <abbr title="HyperText Markup Language">HTML</abbr> specification
is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
</p>Icon link with descriptive title
title provides a visible tooltip; aria-label gives an accessible name for the link for screen readers.
<a href="https://github.com/soundscode" title="SoundsCode on GitHub" aria-label="SoundsCode on GitHub">
<img src="github-icon.svg" alt="">
</a>
Discussion