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

Usage#

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" />
</c-tooltip>

With arrow#

Editable Example

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

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>
</c-tooltip>

Placement#

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-button>Left</c-button>
  </c-tooltip>

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

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

  <c-tooltip has-arrow label="bottom" placement="bottom">
    <c-button>Bottom</c-button>
  </c-tooltip>
</c-stack>

Props#

Name	Type	Default	Description
`isOpen`	`boolean`		If `true`, the tooltip is shown.
`defaultIsOpen`	`boolean`		If `true`, the tooltip is initially shown.
`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.
`showDelay`	`number`		The delay in `ms` for the tooltip to show
`hideDelay`	`number`		The delay in `ms` for the tooltip to hide
`closeOnClick`	`boolean`		If `true` hide the tooltip, when the trigger is clicked.
`shouldWrapChildren`	`boolean`		If `true`, the tooltip will wrap the children in a `span` with `tabindex=0`

Slots#

Name	Description
default	Element to around which the tooltip is anchored

Events#

Name	Payload	Description
`@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!