Accessible tooltip component built on Radix UI primitives, with portal-aware rendering that inherits the active stacking context (e.g. inside drawers) and falls back to `document.body`. ## Key Components | Export | Type | Description | |---|---|---| | `TooltipProvider` | Component | Radix `Provider` wrapper; manages tooltip open/close delays globally | | `Tooltip` | Component | Radix `Root`; controls open state for a single tooltip | | `TooltipTrigger` | Component | Radix `Trigger`; wraps the element that activates the tooltip | | `TooltipContent` | Component | Styled content panel; portals into the active container via `usePortalContainer` | ## Usage Example ```typescript import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" export function InfoButton() { return ( ℹ️ This action cannot be undone. ) } ``` ## Notes - **Portal targeting** — `usePortalContainer` pipes the tooltip into a drawer or sheet's DOM node when one is active, preventing z-index clipping. Falls back to `document.body` when no container context is provided. - **Height constraint** — `max-h` is bound to `--radix-popper-available-height`, so oversized content scrolls rather than overflows the viewport. - **Animations** — Entry/exit transitions are driven by Radix `data-state` and `data-side` attributes via Tailwind `animate-in`/`animate-out` utilities. - **`sideOffset`** — Defaults to `4px`; can be overridden per instance via props. **Source:** [`tooltip.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/tooltip.tsx)