Sponsor

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#

import { Tooltip } from "@chakra-ui/core"

import { Tooltip } from "@chakra-ui/core"

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 wrapped in a functional component. Ensure you forwardRef to this component.

Hover me

<Tooltip label="Hey, I'm here!" aria-label="A tooltip">
  Hover me
</Tooltip>

<Tooltip label="Hey, I'm here!" aria-label="A tooltip">
  Hover me
</Tooltip>

Editable Example

With an icon#

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

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

Editable Example

With arrow#

<Tooltip hasArrow label="Search places" bg="gray.300" color="black">
  <SearchIcon />
</Tooltip>

<Tooltip hasArrow label="Search places" bg="gray.300" color="black">
  <SearchIcon />
</Tooltip>

Editable Example

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>

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

Editable Example

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

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

Editable Example

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>

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

Editable Example

Placement#

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

<VStack spacing={6}>
  <HStack spacing={6}>
    <Tooltip shouldWrapChildren label="Auto start" placement="auto-start">
      <Button>Auto-Start</Button>
    </Tooltip>

    <Tooltip shouldWrapChildren label="Auto" placement="auto">
      <Button>Auto</Button>
    </Tooltip>

    <Tooltip shouldWrapChildren label="Auto end" placement="auto-end">
      <Button>Auto-End</Button>
    </Tooltip>
  </HStack>

  <HStack spacing={6}>
    <Tooltip shouldWrapChildren label="Top start" placement="top-start">
      <Button>Top-Start</Button>
    </Tooltip>

    <Tooltip shouldWrapChildren label="Top" placement="top">
      <Button>Top</Button>
    </Tooltip>

    <Tooltip shouldWrapChildren label="Top end" placement="top-end">
      <Button>Top-End</Button>
    </Tooltip>
  </HStack>

  <HStack spacing={6}>
    <Tooltip shouldWrapChildren label="Right start" placement="right-start">
      <Button>Right-Start</Button>
    </Tooltip>

    <Tooltip shouldWrapChildren label="Right" placement="right">
      <Button>Right</Button>
    </Tooltip>

    <Tooltip shouldWrapChildren label="Right end" placement="right-end">
      <Button>Right-End</Button>
    </Tooltip>
  </HStack>

  <HStack spacing={6}>
    <Tooltip shouldWrapChildren label="Bottom start" placement="bottom-start">
      <Button>Bottom Start</Button>
    </Tooltip>

    <Tooltip shouldWrapChildren label="Bottom" placement="bottom">
      <Button>Bottom</Button>
    </Tooltip>

    <Tooltip shouldWrapChildren label="Bottom end" placement="bottom-end">
      <Button>Bottom End</Button>
    </Tooltip>
  </HStack>

  <HStack spacing={6}>
    <Tooltip shouldWrapChildren label="Left start" placement="left-start">
      <Button>Left-Start</Button>
    </Tooltip>

    <Tooltip shouldWrapChildren label="Left" placement="left">
      <Button>Left</Button>
    </Tooltip>

    <Tooltip shouldWrapChildren label="Left end" placement="left-end">
      <Button>Left-End</Button>
    </Tooltip>
  </HStack>
</VStack>

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

Editable Example

More examples#

<Wrap spacing={6}>
  <Tooltip shouldWrapChildren label="I close on click">
    <Button>Close on Click - true(default)</Button>
  </Tooltip>

  <Tooltip
    shouldWrapChildren
    label="I don't close on click"
    closeOnClick={false}
  >
    <Button>Close on Click - false</Button>
  </Tooltip>

  <Tooltip shouldWrapChildren label="I am always open" placement="top" isOpen>
    <Button>Always Open</Button>
  </Tooltip>

  <Tooltip
    shouldWrapChildren
    label="I am open by default"
    placement="left"
    defaultIsOpen
  >
    <Button>Open on startup</Button>
  </Tooltip>

  <Tooltip shouldWrapChildren label="Opened after 500ms" openDelay={500}>
    <Button>Delay Open - 500ms</Button>
  </Tooltip>

  <Tooltip shouldWrapChildren label="Closed after 500ms" closeDelay={500}>
    <Button>Delay Close - 500ms</Button>
  </Tooltip>

  <Tooltip shouldWrapChildren label="I have 15px arrow" hasArrow arrowSize={15}>
    <Button>Arrow size - 15px</Button>
  </Tooltip>
</Wrap>

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

Editable Example

Props#

Name	Type	Default	Description
`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.
`hasArrow`	`boolean`		If `true` display an arrow tip on the tooltip.
`children`	`React.ReactNode`		The `ReactNode` to be used as the trigger of the tooltip.
`shouldWrapChildren`	`boolean`		If `true`, the tooltip will wrap the children in a `span` with `tabIndex=0`
`isOpen`	`boolean`		If `true`, the tooltip is shown.
`defaultIsOpen`	`boolean`		If `true`, the tooltip is initially shown.
`openDelay`	`number`	`0`	The delay in `ms` for the tooltip to show
`closeDelay`	`number`	`0`	The delay in `ms` for the tooltip to hide
`closeOnClick`	`boolean`	`true`	If `true` hide the tooltip, when the trigger is clicked.
`onOpen`	`function`		Function called when the tooltip shows.
`onClose`	`function`		Function called when the tooltip hides.
`isDisabled`	`boolean`	`false`	If `true`, the tooltip is not shown onHover, mouseOver, or other triggers.
`closeOnMouseDown`	`boolean`	`true`	If `true`, the tooltip will close on mouse down

Edit this page

Tooltip

Import#

Usage#

With an icon#

With arrow#

Tooltip with focusable content#

Disabled Tooltip#

Tooltip with focusable content#

Placement#

More examples#

Props#

Tooltip

.css-12m0k8p{pointer-events:auto;}Import.css-1l2j62r{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-1l2j62r:focus,.css-1l2j62r[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

With an icon#

With arrow#

Tooltip with focusable content#

Disabled Tooltip#

Tooltip with focusable content#

Placement#

More examples#

Props#

Import#