Tooltip
A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.
The Tooltip component follows the WAI-ARIA Tooltip Pattern.
Import#
Usage#
If the children of Tooltip is a string, we wrap with in a span with
tabIndex set to 0, to ensure it meets the accessibility requirements.
Hover me
Editable Example
With an icon#
Editable Example
With arrow#
Editable Example
Tooltip with focusable content#
If the children of the tooltip is a focusable element, the tooltip will show when you focus or hover on the element, and will hide when you blur or move cursor out of the element.
Editable Example
Placement#
Using the placement prop you can adjust where your tooltip will be displayed.
Editable Example
Props#
| Name | Type | Default | Description |
|---|---|---|---|
isOpen | boolean | If true, the tooltip is shown. | |
defaultIsOpen | boolean | If true, the tooltip is initially shown. | |
label | string | The label of the tooltip. | |
aria-label | string | An alternate label for screen readers. | |
placement | PopperJS.Placement | bottom | Position the tooltip relative to the trigger element as well as surrounding elements. |
children | React.ReactNode | The ReactNode to be used as the trigger of the tooltip. | |
hasArrow | boolean | If true display an arrow tip on the tooltip. | |
showDelay | number | The delay in ms for the tooltip to show | |
hideDelay | number | The delay in ms for the tooltip to hide | |
closeOnClick | boolean | If true hide the tooltip, when the trigger is clicked. | |
shouldWrapChildren | boolean | If true, the tooltip will wrap the children in a span with tabIndex=0 | |
onOpen | function | Function called when the tooltip shows. | |
onClose | function | Function called when the tooltip hides. |