Chuyển tới nội dung
werewolf-ui
Component

Tooltip

A short text hint for the element it wraps, shown on hover and on keyboard focus. Inverse surface, the opposite of the current mode (light in dark mode, dark in light mode), with a medium shadow and 13px text. Text only: anything a user acts on belongs in a popover or a dialog.

Xem trước

Props

  • side
  • align
  • sideOffset
  • delayDuration
  • disabled
  • open
  • defaultOpen
  • label
import { IconLink } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
import { Tooltip } from "@/components/ui/tooltip"

<Tooltip content="Copy link">
  <Button variant="secondary" iconOnly aria-label="Copy link">
    <IconLink size={16} weight="regular" />
  </Button>
</Tooltip>

Cách dùng

Khi nào dùng

  • Name what an icon button does for sighted users, in the same words as its aria-label.
  • Show a detail some users want but nobody needs, such as the full date behind 2 hours ago.

Khi nào không dùng

  • Anything a user must read to finish a task. Write it on the page, or in the description of a Field.
  • Links, buttons or other controls inside the hint. Use Dialog for anything the user acts on.
  • The only name of an icon button. Give the button aria-label as well.

Biến thể

side

Side of the trigger the tooltip opens on. It flips when there is no room.

  • topmặc định

  • right

  • bottom

  • left

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

<Tooltip content="Copy link">
  <Button variant="secondary" iconOnly aria-label="Copy link">
    <IconLink size={16} weight="regular" />
  </Button>
</Tooltip>
<Tooltip content="Copy link" side="right">
  <Button variant="secondary" iconOnly aria-label="Copy link">
    <IconLink size={16} weight="regular" />
  </Button>
</Tooltip>
<Tooltip content="Copy link" side="bottom">
  <Button variant="secondary" iconOnly aria-label="Copy link">
    <IconLink size={16} weight="regular" />
  </Button>
</Tooltip>
<Tooltip content="Copy link" side="left">
  <Button variant="secondary" iconOnly aria-label="Copy link">
    <IconLink size={16} weight="regular" />
  </Button>
</Tooltip>

align

Alignment along the trigger's edge.

  • start

  • centermặc định

  • end

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

<Tooltip content="Copy link" align="start">
  <Button variant="secondary" iconOnly aria-label="Copy link">
    <IconLink size={16} weight="regular" />
  </Button>
</Tooltip>
<Tooltip content="Copy link">
  <Button variant="secondary" iconOnly aria-label="Copy link">
    <IconLink size={16} weight="regular" />
  </Button>
</Tooltip>
<Tooltip content="Copy link" align="end">
  <Button variant="secondary" iconOnly aria-label="Copy link">
    <IconLink size={16} weight="regular" />
  </Button>
</Tooltip>

Ví dụ

Default

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

<Tooltip content="Copy link">
  <Button variant="secondary" iconOnly aria-label="Copy link">
    <IconLink size={16} />
  </Button>
</Tooltip>

Extra detail

A full date behind a relative one, for the few users who want it.

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

<Tooltip content="6 October 2026, 14:32" side="bottom">
  <Button variant="ghost" size="sm">Edited 2 hours ago</Button>
</Tooltip>

Nên và không nên

Nên

  • Name what an icon button does, in the same words as its aria-label.
  • Add a fact the user may want but doesn't need: a full date behind a relative one, a shortcut.
  • Keep it to a few words on one line.

Không nên

  • Don't put links, buttons or other controls in a tooltip.
  • Don't use a tooltip as the only name of an icon button.
  • Don't put anything a user needs to finish a task only in a tooltip.
  • Don't wrap an element that can't take focus, such as plain text or a disabled button.

Props

TênKiểuGiá trịMặc địnhMô tả
content bắt buộcnode--The hint: a few words of plain text, sentence case, no period for a fragment. Copy link, Archived 3 days ago.
sideenumtop | right | bottom | lefttopSide of the trigger the tooltip opens on. It flips when there is no room.
alignenumstart | center | endcenterAlignment along the trigger's edge.
sideOffsetnumber-4Gap between the trigger and the tooltip in px; 4 matches spacing-xs.
delayDurationnumber-200Wait in ms before a hover opens the tooltip. Focus opens it at once.
disabledboolean-falseRenders the trigger without a tooltip.
openboolean--Controlled open state, for a tour or a test. Pair it with onOpenChange.
defaultOpenboolean--Open on first render, when you don't control it.
onOpenChangefunction--Called with true or false when hover, focus or Escape opens or closes the tooltip.

Slot

TênBắt buộcMô tả
triggercóOne element that takes focus: a Button, a link. The tooltip describes it.

Cấu tạo

PhầnMô tả
rootThe tooltip: inverse fill (light on a dark page, dark on a light one) with inverse text, a transparent border (it shows in forced-colors mode, which drops the fill), radius-element, shadow-med, 13px text, at most 320px wide.
triggerThe child element it describes. Gets aria-describedby while the tooltip is open.

Khả năng truy cập

Role: tooltip

PhímHành động
TabFocus on the trigger opens the tooltip at once.
EscapeCloses the tooltip; focus stays on the trigger.
  • The trigger must take focus (a button or a link), so keyboard users get the hint too. The tooltip text is read as the trigger's description.
  • A tooltip never names an icon button on its own: the button still needs aria-label.
  • Hover doesn't exist on touch screens. Don't put anything a user needs only in a tooltip.
  • The tooltip stays open while the pointer moves onto it, so it can be read at any zoom.

Cài đặt

npx shadcn add https://werewolf-ui.vercel.app/r/tooltip.json

Lệnh này thêm luôn styles/werewolf.css, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau @import "tailwindcss", với đường dẫn tính từ file CSS đó (từ app/globals.css là @import "../styles/werewolf.css").