Skip to content

Tooltip Pattern

Tooltip Pattern

About This Pattern

NOTE: This design pattern is work in progress; it does not yet have task force consensus. Progress and discussions are captured in issue 128.

A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out.

Tooltip widgets do not receive focus. A hover that contains focusable elements can be made using a non-modal dialog.

Example

Work to develop a tooltip example is tracked by issue 127.

Keyboard Interaction

Escape: Dismisses the Tooltip.

Note

  1. Focus stays on the triggering element while the tooltip is displayed.
  2. If the tooltip is invoked when the trigger element receives focus, then it is dismissed when it no longer has focus (onBlur). If the tooltip is invoked with mouseIn, then it is dismissed with on mouseOut.

WAI-ARIA Roles, States, and Properties

  • The element that serves as the tooltip container has role tooltip.
  • The element that triggers the tooltip references the tooltip element with aria-describedby.
Back to Top