Tooltip

Used to display additional information when a user hovers over an element.

import { Button } from "@chakra-ui/react"
import { Tooltip } from "@/components/ui/tooltip"

const Demo = () => {
  return (
    <Tooltip content="This is the tooltip content">
      <Button variant="outline" size="sm">
        Hover me
      </Button>
    </Tooltip>
  )
}

Setup

If you don't already have the snippet, run the following command to add the tooltip snippet

npx @chakra-ui/cli snippet add tooltip

The snippet includes a closed component composition for the Tooltip component.

Usage

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

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

Examples

Arrow

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

import { Button } from "@chakra-ui/react"
import { Tooltip } from "@/components/ui/tooltip"

const Demo = () => {
  return (
    <Tooltip showArrow content="This is the tooltip content">
      <Button variant="outline" size="sm">
        Hover me
      </Button>
    </Tooltip>
  )
}

Placement

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

import { Button } from "@chakra-ui/react"
import { Tooltip } from "@/components/ui/tooltip"

const Demo = () => {
  return (
    <Tooltip
      content="This is the tooltip content"
      positioning={{ placement: "right-end" }}
    >
      <Button variant="outline" size="sm">
        Hover me
      </Button>
    </Tooltip>
  )
}

Offset

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

import { Button } from "@chakra-ui/react"
import { Tooltip } from "@/components/ui/tooltip"

const Demo = () => {
  return (
    <Tooltip
      content="This is the tooltip content"
      positioning={{ offset: { mainAxis: 4, crossAxis: 4 } }}
    >
      <Button variant="outline" size="sm">
        Hover me
      </Button>
    </Tooltip>
  )
}

Delay

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

import { Button } from "@chakra-ui/react"
import { Tooltip } from "@/components/ui/tooltip"

const Demo = () => {
  return (
    <Tooltip
      content="This is the tooltip content"
      openDelay={500}
      closeDelay={100}
    >
      <Button variant="outline" size="sm">
        Delay (open: 500ms, close: 100ms)
      </Button>
    </Tooltip>
  )
}

Custom Background

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

import { Button } from "@/components/ui/button"
import { Tooltip } from "@/components/ui/tooltip"
import { FaBell } from "react-icons/fa"

export const TooltipWithCustomBg = () => (
  <Tooltip
    showArrow
    content="This is the tooltip content"
    contentProps={{ css: { "--tooltip-bg": "tomato" } }}
  >
    <Button variant="outline" size="sm">
      <FaBell /> 3
    </Button>
  </Tooltip>
)

Controlled

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

"use client"

import { Button } from "@/components/ui/button"
import { Tooltip } from "@/components/ui/tooltip"
import { useState } from "react"

const Demo = () => {
  const [open, setOpen] = useState(false)
  return (
    <Tooltip
      content="Tooltip Content"
      open={open}
      onOpenChange={(e) => setOpen(e.open)}
    >
      <Button size="sm">{open ? "Hide" : "Show"} tooltip</Button>
    </Tooltip>
  )
}

Store

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 client"

import { Button, HStack, Tooltip, useTooltip } from "@chakra-ui/react"

const Demo = () => {
  const tooltip = useTooltip()
  const toggleOpen = () => tooltip.setOpen(!tooltip.open)
  return (
    <HStack>
      <Button size="sm" variant="subtle" onClick={toggleOpen}>
        Toggle
      </Button>
      <Tooltip.RootProvider value={tooltip}>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Tooltip Target</Button>
        </Tooltip.Trigger>
        <Tooltip.Positioner>
          <Tooltip.Content>This is the tooltip content</Tooltip.Content>
        </Tooltip.Positioner>
      </Tooltip.RootProvider>
    </HStack>
  )
}

Interactive

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

import { Button } from "@chakra-ui/react"
import { Tooltip } from "@/components/ui/tooltip"

const Demo = () => {
  return (
    <Tooltip content="This is the tooltip content" interactive>
      <Button variant="outline" size="sm">
        Hover me
      </Button>
    </Tooltip>
  )
}

Disabled

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

import { Button } from "@chakra-ui/react"
import { Tooltip } from "@/components/ui/tooltip"

const Demo = () => {
  return (
    <Tooltip content="This is the tooltip content" disabled>
      <Button variant="outline" size="sm">
        Hover me
      </Button>
    </Tooltip>
  )
}

With Avatar

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

import { Avatar } from "@/components/ui/avatar"
import { Tooltip } from "@/components/ui/tooltip"
import { useId } from "react"

const Demo = () => {
  const id = useId()
  return (
    <Tooltip ids={{ trigger: id }} content="Segun Adebayo is online">
      <Avatar
        ids={{ root: id }}
        name="Segun Adebayo"
        src="https://bit.ly/sage-adebayo"
      />
    </Tooltip>
  )
}

With Checkbox

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

Welcome

import { Checkbox } from "@/components/ui/checkbox"
import { Tooltip } from "@/components/ui/tooltip"
import { useId } from "react"

const Demo = () => {
  const id = useId()
  return (
    <Tooltip ids={{ trigger: id }} content="This is the tooltip content">
      <Checkbox ids={{ root: id }}>Welcome</Checkbox>
    </Tooltip>
  )
}

With MenuItem

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

import type { MenuItemProps } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
import {
  MenuContent,
  MenuItem,
  MenuRoot,
  MenuTrigger,
} from "@/components/ui/menu"
import { Tooltip } from "@/components/ui/tooltip"

const Demo = () => {
  return (
    <MenuRoot>
      <MenuTrigger asChild>
        <Button variant="outline" size="sm">
          Open
        </Button>
      </MenuTrigger>
      <MenuContent>
        <TooltipMenuItem value="new-txt" tooltip="This is the tooltip content">
          Open tooltip
        </TooltipMenuItem>
        <MenuItem value="new-file">New File...</MenuItem>
        <MenuItem value="new-win">New Window</MenuItem>
        <MenuItem value="export">Export</MenuItem>
      </MenuContent>
    </MenuRoot>
  )
}

const TooltipMenuItem = (props: MenuItemProps & { tooltip: string }) => {
  const { value, tooltip, ...rest } = props
  return (
    <Tooltip
      ids={{ trigger: value }}
      openDelay={200}
      closeDelay={0}
      positioning={{ placement: "right" }}
      content={tooltip}
    >
      <MenuItem value={value} {...rest} />
    </Tooltip>
  )
}

With Switch

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

import { Switch } from "@/components/ui/switch"
import { Tooltip } from "@/components/ui/tooltip"
import { useId } from "react"

const Demo = () => {
  const id = useId()
  return (
    <Tooltip ids={{ trigger: id }} content="This is the tooltip content">
      <Switch ids={{ root: id }} />
    </Tooltip>
  )
}

With Tabs

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

Manage your team members

import { Tabs } from "@chakra-ui/react"
import { Tooltip } from "@/components/ui/tooltip"
import { LuFolder, LuSquareCheck, LuUser } from "react-icons/lu"

const Demo = () => {
  return (
    <Tabs.Root defaultValue="members">
      <Tabs.List>
        <Tooltip
          positioning={{ placement: "top" }}
          ids={{ trigger: "members" }}
          content="This is the tooltip content"
        >
          {/* TODO: Remove this once Zag.js is fixed */}
          <span>
            <Tabs.Trigger value="members">
              <LuUser />
              Members
            </Tabs.Trigger>
          </span>
        </Tooltip>
        <Tabs.Trigger value="projects">
          <LuFolder />
          Projects
        </Tabs.Trigger>
        <Tabs.Trigger value="tasks">
          <LuSquareCheck />
          Settings
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="members">Manage your team members</Tabs.Content>
      <Tabs.Content value="projects">Manage your projects</Tabs.Content>
      <Tabs.Content value="tasks">
        Manage your tasks for freelancers
      </Tabs.Content>
    </Tabs.Root>
  )
}

Without Snippet

If you don't want to use the snippet, you can use the Tooltip component from the @chakra-ui/react package.

import { Button, Portal, Tooltip } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger asChild>
        <Button variant="outline" size="sm">
          Hover me
        </Button>
      </Tooltip.Trigger>
      <Portal>
        <Tooltip.Positioner>
          <Tooltip.Content>This is the tooltip content</Tooltip.Content>
        </Tooltip.Positioner>
      </Portal>
    </Tooltip.Root>
  )
}

Props

Root

Toggle Tip

ClientOnly

Tooltip

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Setup

Setup