Tooltip

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

Examples

Methods

id

Returns the value of attribute id.