Tooltip

Non-actionable, brief informative message or tip. Tooltips are user-triggered to give extra information that is contextual but not critical to a user’s journey. Tooltips are initiated in one of three ways: hover, focus or press.

Use Cases

User should be able to:

  • Open and close tooltips
  • Identify tooltips
  • Have time to read the tooltip label

Interaction and Style

Relevant WCAG Requirements

  • Content on Hover or Focus

    Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true: Dismissible, Hoverable, Persistent.

    WCAG 2.1 Understanding 1.4.13
  • Name, Role, Value

    For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

    WCAG 2.1 Understanding 4.1.2
  • Label in Name

    For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

    WCAG 2.1 Understanding 2.5.3
  • Non-Text Contrast

    The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): User Interface Components, Graphical Objects.

    WCAG 2.1 Understanding 1.4.11
  • Meaningful Sequence

    Present content in a meaningful order. This ensures that the content makes sense when read by a screen reader or other assistive technology, even when styles are turned off.

    WCAG 2.1 Understanding 1.3.2
  • Info and Relationships

    Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.

    WCAG 2.1 Understanding 1.3.1

Keyboard Navigation

KeyAction
TabFocuses on the element with a tooltip.

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.