Tooltip

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

    SourceTheme source@chakra-ui/tooltip

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#

const CustomCard = React.forwardRef(({ children, ...rest }, ref) => (
<Box p='1'>
<Tag ref={ref} {...rest}>
{children}
</Tag>
</Box>
))
const CustomToolTip = () => (
<Tooltip label='Hover me'>
<CustomCard>Tag Here</CustomCard>
</Tooltip>
)
render(<CustomToolTip />)
<Tooltip label="Hey, I'm here!" aria-label='A tooltip'>
Hover me
</Tooltip>

With an icon#

<Tooltip label='Phone number' fontSize='md'>
<PhoneIcon />
</Tooltip>

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 hasArrow label='Search places' bg='gray.300' color='black'>
<SearchIcon />
</Tooltip>

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.

<Tooltip hasArrow label='Search places' bg='red.600'>
<Button>Button</Button>
</Tooltip>

Disabling Tooltip#

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

<Tooltip isDisabled>
<SearchIcon />
</Tooltip>

Tooltip around disabled Button#

By default the Tooltip is not shown when it is around a disabled Button.

<Tooltip hasArrow label='You can not see me'>
<Button isDisabled>Button</Button>
</Tooltip>

To show the Tooltip on a disabled Button you need to provide the shouldWrapChildren prop. This means that the Button is surrounded by a span on which the Tooltip is pinned. You could simply add a margin to the Tooltip to have it more or less 'pinned' on the Button again.

<Tooltip hasArrow label='You can see me' shouldWrapChildren mt='3'>
<Button isDisabled>Button</Button>
</Tooltip>

There's a case where the borderRadius of a button breaks when the button is in a ButtonGroup that has the isAttached prop set, and the tooltip has the shouldWrapChildren prop set. A workaround could be to pass the specific borderRadius depending on the isDisabled prop of the Button.

<ButtonGroup colorScheme='teal' isAttached>
<Tooltip label='works'>
<Button>1</Button>
</Tooltip>
<Tooltip label='messes up border radius' shouldWrapChildren>
<Button isDisabled>2</Button>
</Tooltip>
<Tooltip label='this could be a workaround' shouldWrapChildren>
<Button isDisabled borderRadius='0'>
3
</Button>
</Tooltip>
<Button>4</Button>
</ButtonGroup>

Placement#

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

<VStack spacing={6}>
<HStack spacing={6}>
<Tooltip label='Auto start' placement='auto-start'>
<Button>Auto-Start</Button>
</Tooltip>
<Tooltip label='Auto' placement='auto'>
<Button>Auto</Button>
</Tooltip>
<Tooltip label='Auto end' placement='auto-end'>
<Button>Auto-End</Button>
</Tooltip>
</HStack>
<HStack spacing={6}>
<Tooltip label='Top start' placement='top-start'>
<Button>Top-Start</Button>
</Tooltip>
<Tooltip label='Top' placement='top'>
<Button>Top</Button>
</Tooltip>
<Tooltip label='Top end' placement='top-end'>
<Button>Top-End</Button>
</Tooltip>
</HStack>
<HStack spacing={6}>
<Tooltip label='Right start' placement='right-start'>
<Button>Right-Start</Button>
</Tooltip>
<Tooltip label='Right' placement='right'>
<Button>Right</Button>
</Tooltip>
<Tooltip label='Right end' placement='right-end'>
<Button>Right-End</Button>
</Tooltip>
</HStack>
<HStack spacing={6}>
<Tooltip label='Bottom start' placement='bottom-start'>
<Button>Bottom Start</Button>
</Tooltip>
<Tooltip label='Bottom' placement='bottom'>
<Button>Bottom</Button>
</Tooltip>
<Tooltip label='Bottom end' placement='bottom-end'>
<Button>Bottom End</Button>
</Tooltip>
</HStack>
<HStack spacing={6}>
<Tooltip label='Left start' placement='left-start'>
<Button>Left-Start</Button>
</Tooltip>
<Tooltip label='Left' placement='left'>
<Button>Left</Button>
</Tooltip>
<Tooltip label='Left end' placement='left-end'>
<Button>Left-End</Button>
</Tooltip>
</HStack>
</VStack>

More examples#

<Wrap spacing={6}>
<WrapItem>
<Tooltip label='I close on click'>
<Button>Close on Click - true(default)</Button>
</Tooltip>
</WrapItem>
<WrapItem>
<Tooltip label="I don't close on click" closeOnClick={false}>
<Button>Close on Click - false</Button>
</Tooltip>
</WrapItem>
<WrapItem>
<Tooltip label='I am always open' placement='top' isOpen>
<Button>Always Open</Button>
</Tooltip>
</WrapItem>
<WrapItem>
<Tooltip label='I am open by default' placement='left' defaultIsOpen>
<Button>Open on startup</Button>
</Tooltip>
</WrapItem>
<WrapItem>
<Tooltip label='Opened after 500ms' openDelay={500}>
<Button>Delay Open - 500ms</Button>
</Tooltip>
</WrapItem>
<WrapItem>
<Tooltip label='Closed after 500ms' closeDelay={500}>
<Button>Delay Close - 500ms</Button>
</Tooltip>
</WrapItem>
<WrapItem>
<Tooltip label='I have 15px arrow' hasArrow arrowSize={15}>
<Button>Arrow size - 15px</Button>
</Tooltip>
</WrapItem>
</Wrap>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel