Component

Tooltip

Published on

Description

Write a plain title attribute. The bootstrap/tooltip.js script replaces each one with a popover="hint" element anchored to the element it describes, shown on hover and on focus. Without JavaScript, or without CSS anchor positioning, the browser keeps rendering its own title tooltip, so nothing is lost.

The tooltip renders above the element by default and moves below it, or toward the opposite inline edge, when the viewport runs out of room. It hides itself when the element it describes scrolls out of view.

Use it for supplemental hints that repeat or clarify. Content that a user must read to complete a task belongs in the page, not in a tooltip. For overlays with interactive content, use a Popover.

Example

Open in new tab
View HTML markup 
  <p>The <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> maintains the HTML standard.</p>
<p><button type="button" title="Saves without leaving the page">Save</button></p>
<p><a href="/component/popover" title="Non-modal overlay shown on demand">Popover</a></p>

Accessibility

  • The title stays on the element, so the accessible description is unchanged. It is emptied only while the pointer is over the element, which is what stops the browser drawing its own tooltip on top.
  • The tooltip element is aria-hidden. It repeats the title visually and adds nothing for a screen reader to announce twice.
  • Tooltips open on focus as well as hover, and abbr is given tabindex="0" so keyboard users can reach its expansion.
  • Escape closes an open tooltip, it stays open while hovered, and it never times out, meeting WCAG 1.4.13.
  • A 400ms delay before showing avoids flashing tooltips while the pointer crosses the page.

References

  • Popover — for overlays holding interactive content
  • Dialog — for modal content that blocks the page
  • Inline format — for abbr and other inline semantics

Variables

None