Tooltip

readyNot reviewed for a11y

This page may be removed. Primer plans to move all Rails component documentation to Lookbook.

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 Primer::ButtonComponent, Primer::Beta::Link, or Primer::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 Primer::Beta::Button, Primer::Beta::Link, or Primer::Beta::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

Name	Required	Description
for_id		`String` The ID of the element that the tooltip should be attached to.
type		`Symbol` One of `:description` or `:label`.
direction		`Symbol` One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`.
text		`String` The text content of the tooltip. This should be brief and no longer than a sentence.
system_arguments		`Hash` System arguments

Methods

`id`

Returns the value of attribute id.