Tooltip
Brief, non-interactive descriptions for hoverable and focusable triggers.
Contract
Provider coordinates open and close delays across a group of related triggers.
Root supports defaultOpen or controlled open/onOpenChange state, while
Positioner owns side, alignment, offset, and collision handling. Keep popup
content supplemental and non-interactive; actions belong in TRPopover or TRDialog.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/tooltip.css';Scroll inside the code area to read long lines.
Imports
import { TRTooltip } from '@tinyrack/ui/components/tooltip';Scroll inside the code area to read long lines.
Playground
Usage
Accessible icon description permalink
The icon button keeps an accessible name without relying on tooltip content. This documentation preview starts open so the inverse surface and arrow remain visible.
Examples
Positioning sides permalink
Hover or focus each trigger to compare requested sides. Collision avoidance may flip a tooltip when the preferred side has insufficient room.
Long collision-safe content permalink
The default-open surface wraps long operational copy and uses the available viewport width when its right-side preference cannot fit.
Provider delay group permalink
Hover or focus the status controls in sequence. Provider coordinates a 500ms initial delay and a forgiving 100ms close delay for the group.
Shared handle and viewport permalink
Detached triggers share one payload-aware Root. Viewport provides the transition container when the active trigger changes content.
API
Base UI owns hover/focus timing, accessible description linkage, portal
positioning, collision handling, and Escape dismissal. Every compound part and
prop/state type is exported from @tinyrack/ui/components/tooltip; matching CSS
remains opt-in. Give icon-only triggers their own aria-label, and never make
the tooltip the only source of required information because touch users may not
receive hover content.
Provider coordinates delay groups. Root owns state. Trigger opens from
mouse hover or keyboard focus. Portal selects the portal container.
Positioner handles placement and collision. Popup is the role="tooltip"
accessible description. Arrow points to the trigger. Viewport animates
content shared by multiple triggers. createHandle connects detached triggers
to a payload-aware root. Escape dismisses without moving focus; touch press does
not open the tooltip.