Tooltip for a button

Example

Specifications

From https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip

Characteristics:
Description: Popup that displays a description for an element when a user hovers over or focuses on that element. It should popup automatically when the user gives input focus to the widget or element with which it is associated. The tooltip widget can be dismissed by pressing the Escape key or by other methods noted below. The tooltip widget differs from the Dialog (Tooltip) in that it does not receive focus at any time.

The tooltip may appear immediately or there may be a small delay before the tooltip appears.
Keyboard Interaction:

Escape: Dismisses the Tooltip.

Note
  1. The trigger element to which the tooltip is attached, e.g., a btn, should never actually lose input focus.
  2. If the tooltip is invoked when the trigger element gets focus, then it should be dismissed when it no longer has focus (onBlur). If the tooltip is invoked with mouseIn, then it should be dismissed with a mouseOut.
  3. If nested widgets use the same keys, e.g., Escape, then they should be handled in a Last In First Out (LIFO) manner. For example, an editable grid contains gridcells which contain date fields. The user invokes Actionable mode on the grid and then interacts with the Date Field to invoke the Date Picker. At this point the first press of the Escape key will close the Date Picker, the second press will exit Actionable mode and return to Navigation mode.
WAI-ARIA Roles, States, and Properties:
  • Uses the WAI-ARIA role tooltip.
  • The element that the tooltip is for references the tooltip using aria-describedby.
Example:
Note

Any examples referenced here that are hosted outside www.w3.org may have changed and may not accurately exemplify the guidance in this section. The APG task force is developing examples for APG version 1.1 that will be directly incorporated into the guide.