Component catalog
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
A short glass label that floats next to a trigger while the pointer hovers it or the trigger holds keyboard focus, describing that trigger — the web analogue of SwiftUI's .help(:) (macOS / iPadOS-with-pointer) and UIKit's UIToolTipInteraction (iPadOS 16+).
import { Tooltip } from "@liquidify/react/tooltip"| Prop | Type | Default | Description |
|---|---|---|---|
| align | TooltipAlign | undefined | center | Cross-axis alignment of the panel against the trigger. |
| aria-label | string | undefined | — | Accessible name of the panel itself, if needed beyond `aria-describedby`. |
| aria-labelledby | string | undefined | — | Id of the element labelling the panel. |
| className | string | undefined | — | Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean. |
| defaultOpen | boolean | undefined | false | Uncontrolled seed for the open state. |
| delay | number | undefined | {@link DEFAULT_TOOLTIP_DELAY_MS } | Hover-open delay in milliseconds; keyboard focus opens immediately. |
| label required | ReactNode | — | The tooltip's short text body — mirrors `.help`'s single text argument. |
| material | "frosted" | "regular" | "clear" | undefined | enclosing `<Material default>`, else `"regular"` | Material of the glass surface — `frosted · regular · clear` (§06). Forwarded to the engine, which resolves the chain `prop ?? <Material default> ?? "regular"`, so a bare surface inherits the enclosing provider default. |
| onOpenChange | ((open: boolean) => void) | undefined | — | Fires with the next boolean on every show/hide path. |
| open | boolean | undefined | — | Controlled open state. |
| perf | "low" | "high" | undefined | derived from `<Backdrop type>`, else `"low"` | Perf budget of the glass surface (ADR-0006/0007). Forwarded to the engine as `data-glass-perf`; `"high"` opts this surface into the edge-lensing filter. When omitted, derives from the enclosing `<Backdrop type>` (§04). |
| placement | TooltipPlacement | undefined | top | Which trigger edge the panel sits on (forwarded to `Popup`). |
| ref | Ref<HTMLDivElement> | undefined | — | Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`. |
| trigger required | ReactNode | — | The anchored trigger element, merged via `Popup.Trigger asChild`. |
Tooltip supports the documented keyboard interactions below.
| Name | Value |
|---|---|
| --lq-color-label-primary- | #000000#ffffff |
| --lq-duration- | 0ms80ms120ms150ms250ms350ms500ms |
| --lq-easing- | cubic-bezier(0.25, 0.1, 0.25, 1)cubic-bezier(0, 0, 0.2, 1)cubic-bezier(0.4, 0, 1, 1)cubic-bezier(0.175, 0.885, 0.32, 1.275)cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| --lq-glass- | 440.71.15var(--lq-segmented-control-indicator-blur)calc(var(--lq-glass-material-blur) * 8)var(--lq-shadow-presentational) |
| --lq-hit-target-touch | 2.75rem |
| --lq-popup- | 1 0.90.9 1 |
| --lq-popup-x | Component-defined value |
| --lq-popup-y | Component-defined value |
| --lq-radius- | 0.25rem0.375rem0.5rem0.625rem0.875rem1.125rem1.375rem9999rem |
| --lq-tooltip-delay | Component-defined value |
| --lq-tooltip-max-width | Component-defined value |
| --lq-tooltip-pad | Component-defined value |