Table of Contents
Tooltip
Tooltips appear when a user hovers or focuses an element. They provide contextual information about the element they are paired with.
Used for this
- To describe the function of an element when it might be ambiguous
- To describe the function of unlabeled icons
Not for this
- To provide information a user needs to know or remember
- To display truncated text, use a title attribute instead
How to use it
Default
The default usage of a Tooltip component.
Placement
There are 13 placement options. By default, the Tooltip occupies the top
position. auto uses the placement with the most available space.
Size
Tooltips can be small, medium, large, or extra-large. Only large and extra-large sizes can contain a Title.
Type
Tooltips can be light or dark. Small and medium tooltips should default to dark. Large and extra-large tooltips should default to light.
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-tooltips
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Tooltip } from '@zendeskgarden/react-tooltips'
API
Tooltip
| Prop name | Type | Default | Description |
|---|---|---|---|
appendToNode | Element | Appends the tooltip to the element provided | |
content | ReactNode | Required | Defines the content of the tooltip |
delayMS | number | 500 | Adds milliseconds of delay to the opening and closing of the tooltip |
hasArrow | boolean | true | Adds an arrow to the tooltip |
isInitialVisible | boolean | Displays the tooltip on initial render | |
isVisible | boolean | Displays the tooltip | |
placement | 'end' | 'start' | 'auto' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'end-top' | 'end-bottom' | 'start-top' | 'start-bottom' | 'top' | Adjusts the placement of the tooltip |
refKey | string | 'ref' | Defines the ref key used to position the tooltip |
size | 'small' | 'medium' | 'large' | 'extra-large' | Adjusts the padding and font size | |
type | 'light' | 'dark' | 'dark' | Specifies the tooltip type |
zIndex | string | number | Sets the z-index of the tooltip |
Tooltip.Paragraph
Extends HTMLAttributes<HTMLParagraphElement>
Tooltip.Title
Extends HTMLAttributes<HTMLDivElement>