Tooltip
- Library
- UDS Base
- Repository
- github.com/telus/universal-design-system
- Package
- npmjs.com/package/@telus-uds/components-base
- Package version
- 1.6.1
Introduction
import { Tooltip } from '@telus-uds/components-base'
Tooltip provides a descriptive and detailed explanation or instructions. It can be used next to an input label to help
a user fill the input, or as a standalone component.
Guidance
- You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
- Tooltips may also be useful when vertical space is an issue.
By default the TooltipButton component will be used as a control for triggering the tooltip, but you may attach
a tooltip to any other component.
A render function can be used to adjust the control's styling on state changes (hover, focus, etc.).
Positioning
By default a Tooltip will be automatically positioned in a way that ensures it fits within the viewport.
You may use the position prop to suggest a position - it will be used, unless the tooltip would end up outside the viewport.
Accessibility
Tooltip's control is announced as a button with a label encouraging interaction. When open, the Tooltip receives an
alert role, so that it's appearance is picked up by screen readers.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| position | 'auto' | 'above' | 'right' | 'below' | 'left' | 'auto' | Use to place the tooltip in a specific location (only if it fits within viewport). |
| copy | 'en' | 'fr' | 'en' | Select english or french copy for the accessible label. |
| children | union | Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the pressable state and tooltip variant as an argument. | |
| content | union | The message. Can be raw text or text components. | |
| tokens | custom | System tokens prop, see tokens for more details | |
| variant | objectOf | System variant prop, see variants for more details |