Refine By

Tooltips

  • Contents:
  • Text labels that appear when a user hovers on, focuses on, or touches an element.
  • Tooltips usually contain brief helper text about an element.
  • Use Popover instead if you need to include actionable elements or longer content

Guidelines

 

  • Use tooltips under the following conditions:
    • For an element or control without a text label.
    • When an element or control benefits from additional information.
  • For additional Android guidelines on tooltips, refer here
  • Use tooltips to provide helpful text that add to the user’s understanding of an element’s function.
  • Use tooltips for interactive imagery.
  • Use alt-attributes for static images.
  • Tooltips should be purely informational.
  • Do not put a CTA in a Tooltip. Use a Popover instead.
  • Trigger tooltips within 150ms of their activation from a source element.
  • Tooltips should exit within 150ms of their source element losing focus.
  • Keep the content of a tooltip short and to the point.
  • If the content will occupy rows of text, consider embedding it within the view¬†or using an alternative content disclosure element such as an accordion.

Accessibility

  • ¬†Ensure that users can understand what information will be expanded by using clear, concise text descriptions
  • Ensure that all interactions can be triggered by users who are navigating with a keyboard.
  • Ensure that sufficient color contrast is used and that a focus state is provided so that the user knows which element they are on.
  • Provide helper content to screen reader users using ARIA so that a user knows whether or not an element is expanded.
  • Ensure that programmatic focus moves to the newly expanded content.
Read More

Considerations

  • Ensure that, when an “onhover” action is triggered, “onfocus” will also trigger the action.
  • Keep in mind that in responsive environments, users with or without disabilities who zoom in to 200% will trigger the mobile view. If tooltip information is provided to desktop users, it will be necessary to make it available to all users – regardless of which type of device they are using.
  • In addition to being able to open a tooltip from the keyboard, it is necessary to ensure that the tooltip can be closed from the keyboard – typically by using the esc key.
  • Testing should be done to ensure that:
    • The element with a tooltip can receive focus.
    • The tooltip can be expanded and closed from only a keyboard.
    • Information included in a tooltip is device-independent.
    • Screen readers announce the tooltip when it is expanded, and do not announce the information when it is not open.

 

ARIA Roles, States, and Properties

Related Elements

Related Components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
May. 03 2017 9:18pm Initial content entry