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#

NameTypeDefaultDescription
isOpenbooleanIf true, the tooltip is shown.
defaultIsOpenbooleanIf true, the tooltip is initially shown.
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.
childrenReact.ReactNodeThe ReactNode to be used as the trigger of the tooltip.
hasArrowbooleanIf true display an arrow tip on the tooltip.
showDelaynumberThe delay in ms for the tooltip to show
hideDelaynumberThe delay in ms for the tooltip to hide
closeOnClickbooleanIf true hide the tooltip, when the trigger is clicked.
shouldWrapChildrenbooleanIf true, the tooltip will wrap the children in a span with tabIndex=0
onOpenfunctionFunction called when the tooltip shows.
onClosefunctionFunction called when the tooltip hides.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo