`title` attribute

The title attribute can add a short supplemental description. Desktop browsers may show it as a tooltip, but it should not be the only way important information is provided.

What you will learn

What supplemental information title can provide
Why tooltip behavior differs across devices and assistive technology
How to provide visible text and accessible names instead

Basic usage

Write a string as the attribute value. A desktop browser may show it after the pointer rests over the element.

A short supplement

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

The attribute is global, so it can appear on many HTML elements. Some elements, such as abbr, give the value a more specific meaning.

Do not hide essential information in a tooltip

Tooltips may not appear on touch devices, may disappear before users can read them, and are not consistently announced by assistive technology. If users need the information, put it in visible text or connect a description with an appropriate accessible relationship.

Visible link context

<a href="/settings.html">
  Account settings
  <span class="visually-hidden">(opens your preferences)</span>
</a>

Common mistakes

Do not use title as the accessible name for an icon-only button; give the button a reliable name instead.
Do not repeat the visible link text in a long tooltip.
Keep descriptions short and useful; empty or duplicated values add noise.
Use alt for meaningful image alternatives and label for form controls.

When it is a good fit

Use title for genuinely supplemental context, such as the expanded name of an abbreviation or a non-essential hint. Test the result on keyboard, touch, and screen-reader interfaces.