chrome
<tc-tooltip>
Hover or focus tooltip anchored to a slotted trigger. Auto-flips when it would overflow. Renders in the top-layer via the popover API.
import
"@ra9/tan-compose-kit/tooltip"
Props
| Name | Type | Default | Description |
|---|---|---|---|
text | string | "" | Short tooltip text. For rich content, use the `content` slot instead. |
placement | "top" | "bottom" | "left" | "right" | "top" | Preferred side. The tooltip auto-flips to the opposite side if it doesn't fit. |
delay | number | 200 | Open delay in milliseconds. Prevents flicker on quick pointer crossings. |
offset | number | 8 | Gap between the trigger and the tooltip, in pixels. |
disabled | boolean | false | Suppress the tooltip without removing it from the DOM. |
Slots
| Slot | Description |
|---|---|
(default) | The trigger element. Tooltips fire on `pointerenter` and `focusin` of the host. |
content | Rich tooltip body. Overrides the `text` prop. |
CSS variables
| Variable | Default | Description |
|---|---|---|
--tc-tooltip-bg | var(--tc-color-ink, #14171f) | Tooltip background. |
--tc-tooltip-fg | var(--tc-color-surface, #ffffff) | Tooltip text color. |
--tc-tooltip-radius | var(--tc-radius-sm, 6px) | Corner radius. |
--tc-tooltip-padding | 6px 10px | Padding inside the tooltip. |
--tc-tooltip-max-width | 240px | Wrap text after this width. |
--tc-tooltip-shadow | 0 10px 30px rgba(0, 0, 0, 0.25) | Drop shadow. |
--tc-tooltip-font | var(--tc-font-sans, …) | Font family. |
Examples
Basic
Placement
Rich content
Use the content slot for tooltips with formatting, multiple lines, or icons. Keep them short — tooltips are for hints, not paragraphs.
Save
⌘S
Delay
Set delay="0" for instant tooltips on data-dense UIs, or raise it for less aggressive hints.
Accessibility
- Trigger on pointer hover and on keyboard focus, so keyboard users get parity with mouse users.
Escdismisses while the tooltip is open and the trigger has focus.- The tooltip carries
role="tooltip". For announceable tooltips, give the trigger anaria-describedbypointing to a labelled live region if you need stronger semantics — the popover model defers to the browser for now. - The tooltip auto-flips when its preferred side would push it past the viewport edge.