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 { CTooltip } from "@chakra-ui/vue";


If the child of CTooltip is a string, we wrap it inside a span and set the tab-index attribute to 0 to ensure it meets the accessibility requirements.

Psst! Hover Me
Editable Example
<c-tooltip label="Chakra UI rocks">Psst! Hover Me</c-tooltip>

With an icon#

Editable Example
<c-tooltip label="Welcome home" placement="bottom">
  <c-icon name="phone" />

With arrow#

Editable Example
<c-tooltip has-arrow label="Add new component" placement="right">
  <c-icon name="add" />

Tooltip with focusable content#

If the children of CTooltip is a focusable element, the tooltip will show when you focus or hover on the element, and will hide when you blur or moves cursor out of the element.

Editable Example
<c-tooltip has-arrow label="Add order to cart" placement="top" bg="blue.600">
  <c-button>Place order</c-button>


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

Editable Example
<c-stack should-wrap-children>
  <c-tooltip has-arrow label="left" placement="left">

  <c-tooltip has-arrow label="top" placement="top">

  <c-tooltip has-arrow label="right" placement="right">

  <c-tooltip has-arrow label="bottom" placement="bottom">


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.
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


defaultElement to around which the tooltip is anchored


@open-Function called when the tooltip shows.
@close-Function called when the tooltip hides.

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!