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>
  )
}

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 { LuCheckSquare, LuFolder, 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">
          <LuCheckSquare />
          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