Tooltip

A hint, never a home for information. Tooltips name icon-only actions and expand abbreviations — sat/vB, RBF — and are skipped entirely on touch devices, so nothing essential may live in one. They open on hover and on keyboard focus alike.

Open state — all four sides (static replicas)

The real tooltip renders in a portal at <body> level so ancestors can never clip it — which also means it cannot be pinned open inline. These replicas use the exact surface classes at the exact 8px gap, laid out statically per side.

side=top (replica)

Copy addressbc1q…8p3w

side=bottom (replica)

2/62 of 6 confirmations

side=left (replica)

View on explorertxid

side=right (replica)

sat/vBFee rate per virtual byte

import { Tooltip } from "@coldharbor/ui";

<Tooltip content="Copy address" side="top">
  <Button size="icon" aria-label="Copy address">…</Button>
</Tooltip>

--ch-bg
--ch-border
--ch-fg
--ch-shadow-float

Live specimens

Hover or keyboard-focus each trigger. After one tooltip closes, neighbours open with zero delay for 300ms — sweep along the row to feel it. Hidden on touch-only devices.

Hover / focus — top

Hover / focus — bottom

Rich content

content accepts nodes — keep it one line.

Custom delay

delay={600} for low-value hints.

<Tooltip
  content={<>Open command palette <Kbd>⌘</Kbd><Kbd>K</Kbd></>}
  side="top"
  delay={120}
>
  <Button variant="ghost" aria-label="Search">…</Button>
</Tooltip>

--ch-bg
--ch-border
--ch-fg
--ch-shadow-float

Themes

The open bubble replica over its trigger, under all three layers.

Copy addressbc1q…8p3w

--ch-bg
--ch-border
--ch-fg
--ch-shadow-float