Tooltip
Tooltips display brief labels or messages
- Use tooltips to add additional context to a button or other UI element
- Use tooltips to describe elements or actions of icon buttons
Examples
Get information from something that has a very long description.
This is a tooltip
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
A tooltip provides additional context for a UI element.
Tooltips briefly describe a UI element. They're best used for labelling UI elements with no text, like icon-only buttons and fields.
Standard Tooltip
Get information from something that has a very long description.
Placement
By default, plain tooltips are positioned directly above the parent element.
If the element is in a top app bar, the plain tooltip appears below the element at the same distances.
On this page
import { Tooltip } from '@cerberus/react'Usage
This is a tooltip
Customization
To customize the tooltip, we recommend extending the Tooltip slot recipe found in the preset.
API
export interface TooltipProps { content: ReactNode position?: 'top' | 'right' | 'bottom' | 'left'}| Name | Default | Description |
|---|---|---|
| content | The content to display in the tooltip | |
| position | 'top' | The position of the tooltip relative to the target element |
On this page
Use Cases
- Users should be able to:
- Understand meaning of the icon
- Navigate to and activate tooltip with assistive technology
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Display/hide the tooltip when the element has (or left) focus. |
On this page