Truncated
Truncated clips longer text with an ellipsis and provides an accessible tooltip that displays on truncation.
Structure
The Truncated component renders an HTML <span> element by default. It has no inherent interactivity or semantic role, and the element can be changed with the inherited as prop when a truncated value needs different semantics, such as a Heading for a Panel title.
Truncated composes the Tooltip component in its custom mode, so the text element acts as the Tooltip's trigger instead of the <button> a Tooltip renders on its own. The Tooltip content renders in a portal as a plain HTML <div> with the ARIA role of tooltip. Both come from Floating UI, which handles positioning and accessibility: useRole applies the tooltip role and the trigger's aria-describedby, useHover and useFocus open the Tooltip on pointer hover and keyboard focus, and useDismiss handles dismissal with the Escape key.
ARIA
| Element | Attribute | Description |
|---|---|---|
| Text container | aria-describedby | References the Tooltip content's ID while the Tooltip is open to provide the text a description. |
| Tooltip content | role="tooltip" | Tells assistive technology to consider the element as a tooltip. Applied by Floating UI's useRole hook with the role of tooltip. |
Color and meaning
In many contexts, color may be used to help communicate a certain meaning to the user. However, color should never be the sole indicator of the intended meaning. Not all sighted users experience color the same way.
Truncated inherits every color option from Text. When using color to communicate status, state, or importance, always pair it with supporting text or iconography. Text and color should work together to communicate the intended meaning.
Visual truncation
Truncation is only visual and has no effect on how text is read by assistive technology. When setting custom Tooltip text, it's important to keep the value identical to what's displayed to the user to maintain consistency.
Keyboard
| Key | Function |
|---|---|
| Tab | Moves focus to the next focusable element. Opens the Tooltip when interactive child element is focused. |
| Shift+Tab | Moves focus to the previous focusable element. Closes the Tooltip if open. |
| Escape | Closes the Tooltip if open. |