Tooltip

A tooltip is a brief, informative message that appears when a user interacts with an element.

Import#

import { Tooltip } from '@chakra-ui/react'

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.

Note 🚨: If the Tooltip is wrapping a functional component, ensure that the functional component accepts a ref using forwardRef.

Using custom components#

With an icon#

Note 🚨: If you're wrapping an icon from react-icons, you need to also wrap the icon in a span element as react-icons icons do not use forwardRef.

With arrow#

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.

Disabling Tooltip#

To disable showing a tooltip, pass the isDisabled prop to the Tooltip component.

Placement#

Using the placement prop you can adjust where your tooltip will be displayed.

More examples#

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel