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

Disabled Tooltip#

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

More examples#

Editable Example

Props#

NameTypeDefaultDescription
labelstringThe label of the tooltip.
aria-labelstringAn alternate label for screen readers.
placementPopperJS.PlacementbottomPosition the tooltip relative to the trigger element as well as surrounding elements.
hasArrowbooleanIf true display an arrow tip on the tooltip.
childrenReact.ReactNodeThe ReactNode to be used as the trigger of the tooltip.
shouldWrapChildrenbooleanIf true, the tooltip will wrap the children in a span with tabIndex=0
isOpenbooleanIf true, the tooltip is shown.
defaultIsOpenbooleanIf true, the tooltip is initially shown.
openDelaynumber0The delay in ms for the tooltip to show
closeDelaynumber0The delay in ms for the tooltip to hide
closeOnClickbooleantrueIf true hide the tooltip, when the trigger is clicked.
onOpenfunctionFunction called when the tooltip shows.
onClosefunctionFunction called when the tooltip hides.
isDisabledbooleanfalseIf true, the tooltip is not shown onHover, mouseOver, or other triggers.
closeOnMouseDownbooleantrueIf true, the tooltip will close on mouse down
Edit this page

Made byChakraandRock Content