Accessible, positioned tooltip component built on `@floating-ui/react` that supports smart viewport-aware placement, overflow scrolling, and inline color markup parsing. ## Key Components ### `FloatingTooltip` The main exported component. Renders a hover-triggered tooltip using Floating UI's positioning engine with auto-update, flipping, shifting, and viewport-capped height. **Props:** | Prop | Type | Default | Description | |---|---|---|---| | `content` | `React.ReactNode` | — | Tooltip content; strings support color markup | | `children` | `React.ReactNode` | — | The trigger element | | `side` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Preferred placement | | `className` | `string` | — | Additional classes for the tooltip panel | | `delayDuration` | `number` | `0` | Hover open delay in ms | | `disabled` | `boolean` | `false` | Disables tooltip without unmounting the trigger | ### `parseColoredText` (internal) Parses `[COLOR]text[/COLOR]` markup within string content into styled `` elements mapped to ODS design tokens. Supported color tags: `YELLOW`, `GREEN`, `RED`, `BLUE`, `PINK`, `CYAN`. ## Usage Example ```typescript import { FloatingTooltip } from "./floating-tooltip" // Basic usage Save // With color markup and custom placement Hover me // Conditionally disabled Feature ``` ## Behavior Notes - Tooltip is rendered into a `FloatingPortal` at `z-index: 2147483647` to avoid stacking context issues - The `size` middleware caps tooltip height to available viewport space; tall content becomes scrollable via the inner wrapper - Arrow position is computed automatically and adjusts with placement flipping - `safePolygon()` prevents accidental dismissal when moving the cursor toward the tooltip