title

Advisory text shown as a tooltip on hover. Often misused — understand when it helps and when visible text or ARIA attributes are better alternatives.

Overview

The title attribute provides advisory text about an element. On desktop browsers, hovering the mouse over the element displays a tooltip after a short delay. This is the title attribute on HTML elements — not the <title> element used in <head> for the page title.

Applies to: Any HTML element (it is a global attribute)

Values

Value	Behavior
Any string	Displayed as a tooltip on mouse hover. Inherited by child elements unless they have their own `title`.
`""` (empty string)	Explicitly suppresses an inherited tooltip. The element shows no tooltip.
(not set)	Inherits the nearest ancestor's `title` value, if any.

<button title="Save the current document">Save</button>  <p>The <abbr title="World Health Organization">WHO</abbr> published new guidelines.</p>  <p title="This paragraph has advisory text">Hover over this text.</p>

Good Uses

Abbreviation Expansion

The strongest use case for title is on <abbr> elements. It provides the full expansion of an abbreviation, which browsers display on hover and screen readers may announce.

<p> Use <abbr title="Cascading Style Sheets">CSS</abbr> for styling and <abbr title="Hypertext Markup Language">HTML</abbr> for structure. The <abbr title="World Wide Web Consortium">W3C</abbr> maintains both standards. </p>

iframe Labeling

The title attribute on <iframe> provides an accessible name for the embedded content. Screen readers announce this title so users know what the iframe contains without entering it.

<iframe src="https://example.com/map" title="Interactive map showing office locations" width="600" height="400"> </iframe>

Alternate Stylesheets

On <link rel="stylesheet"> and <link rel="alternate stylesheet">, the title attribute names the stylesheet for the browser's style-switching UI. This is a different behavior from the tooltip — it identifies the stylesheet rather than providing advisory text.

<link rel="stylesheet" href="default.css" title="Default Theme" /> <link rel="alternate stylesheet" href="high-contrast.css" title="High Contrast" /> <link rel="alternate stylesheet" href="large-text.css" title="Large Text" />

Why title Is Usually the Wrong Choice

Despite being a global attribute available on every element, title has significant usability problems that make it unsuitable for important information:

Keyboard users never see it. The tooltip only appears on mouse hover. Keyboard-only users have no way to trigger it.
Touch devices never show it. There is no hover on phones and tablets. The text is completely hidden from mobile users.
Screen reader support is inconsistent. Some screen readers announce the title, some ignore it, and some require specific settings to read it.
Tooltips disappear. The tooltip vanishes when the mouse moves away, making it hard to read long text or refer back to it.
No styling control. You cannot change the font, size, position, or timing of the native tooltip.

Better Alternatives

For any information users need to see, use visible text or ARIA attributes instead of title.

<button> <span aria-hidden="true">💾</span> Save Document </button>  <button aria-label="Save document"> <span aria-hidden="true">💾</span> </button>  <label for="tax-id">Tax ID</label> <input type="text" id="tax-id" aria-describedby="tax-help" /> <p id="tax-help">Your 9-digit federal tax identification number.</p>

Need	Use Instead of title
Button description	Visible label text or `aria-label`
Field help text	Visible helper text with `aria-describedby`
Supplementary info	Visible text, a tooltip component, or a `<details>` element
Image description	The `alt` attribute (always preferred over `title` on images)
Abbreviation	`<abbr title="...">` is acceptable, or spell it out on first use

Accessibility

Never put essential information in title. If users need the text to understand or use the interface, make it visible.
The title on <iframe> is an accessibility requirement. WCAG requires iframes to have an accessible name, and title is the standard way to provide one.
Redundant titles create noise. If an element already has visible text, adding a title with the same text causes screen readers to announce it twice.
Keep it short. If you must use title, keep the text brief. Long tooltips are cut off or disappear before the user finishes reading.

Limitations

Not keyboard-accessible: No keyboard shortcut triggers the tooltip. Only mouse hover works.
Not touch-accessible: Mobile browsers do not display title tooltips at all.
Hover delay is browser-controlled: You cannot change how long the user must hover before the tooltip appears.
No HTML in tooltips: The title value is plain text only. Line breaks work with in some browsers, but no rich formatting.
Inheritance can surprise: A title on a parent element creates tooltips on all descendants, which may not be intended.