Tooltip - Chakra Ui — ContextQMD

Setup

For ease of use, create a closed component composition for the Tooltip component.

Alternatively, you can add it to your project using the following command.

npx @chakra-ui/cli snippet add tooltip

jsx

import { Tooltip } from "@/components/ui/tooltip"

jsx

<Tooltip content="...">
  <button />
</Tooltip>

Use the showArrow prop to show an arrow on the tooltip.

Use the positioning.placement prop to change the position of the tooltip.

Use the positioning.offset prop to change the offset of the tooltip.

Use the openDelay and closeDelay prop to change the delay of the tooltip.

Use the --tooltip-bg CSS variable to change the background color of the tooltip.

Use the open and onOpenChange prop to control the visibility of the tooltip.

An alternative way to control the tooltip is to use the RootProvider component and the useTooltip store hook.

This way you can access the tooltip state and methods from outside the tooltip.

Use the interactive prop to keep the tooltip open when interacting with its content.

Use the disabled prop to disable the tooltip. When disabled, the tooltip will not be shown.

Here's an example of how to use the Tooltip component with an Avatar component.

Here's an example of how to use the Tooltip component with a Checkbox component.

Here's an example of how to use the Tooltip with a MenuItem component.

Here's an example of how to use the Tooltip with a MenuTrigger component.

Here's an example of how to wrap Tooltip around a Switch component.

Here's an example of how to wrap Tooltip around a Tabs component.

Explore the Tooltip component parts interactively. Click on parts in the sidebar to highlight them in the preview.