Tooltip

Tooltips add additional context to interactive UI elements and appear on mouse hover or keyboard focus.

v0.21.0AlphaNot reviewed for accessibility

Description

Tooltip only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort. Use tooltips as a last resort. Please consider Tooltips alternatives.

When using a tooltip, follow the provided guidelines to avoid accessibility issues:

  • Tooltips should contain only non-essential text. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.
  • Tooltip should be rendered through the API of Button, Link, or IconButton. Avoid using Tooltip a standalone component unless absolutely necessary (and only on interactive elements).
  • Tooltip text must be brief and concise even when used to display a description.
  • Tooltips can only hold string content.
  • Tooltips are not allowed on disabled elements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, use aria-disabled="true" instead and programmatically disable the element.
  • Never set tooltips on static, non-interactive elements like span or div. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only and screen reader users. Use of tooltips through Button, Link, or IconButton will guarantee this.
  • If you must use Tooltip as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired. content.

Semantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a aria-labelledby or an aria-describedby association. The type drastically changes semantics and screen reader behavior so follow these guidelines carefully:

  • When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set type: :description. The majority of tooltips will fall under this category.
  • When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set type: :label. label type is usually only appropriate for an icon-only control.

Arguments

NameDefaultDescription
for_id

N/A

String

The ID of the element that the tooltip should be attached to.

type

N/A

Symbol

One of :description or :label.

direction

:s

Symbol

One of :e, :n, :ne, :nw, :s, :se, :sw, or :w.

text

N/A

String

The text content of the tooltip. This should be brief and no longer than a sentence.

system_arguments

N/A

Hash

Examples

Methods

id

Returns the value of attribute id.