## Overview [#overview] The **Tooltip** component displays helpful information or context when users hover over or focus on an element, providing a non-intrusive way to show additional details without cluttering the interface. ## Usage [#usage] ```tsx import { Tooltip, TooltipContent, TooltipTrigger, Button, } from "@tilt-legal/cubitt-components/primitives"; ``` ```tsx

This is a tooltip

 ``` Tooltips show immediately by default. Pass `delay={number}` (milliseconds) to `Tooltip` to debounce hover interactions. ## Examples [#examples] ### Basic text tooltip [#basic-text-tooltip] ```tsx import { Button, Tooltip, TooltipContent, TooltipTrigger, } from "@tilt-legal/cubitt-components/primitives"; export default function Component() { return ( Hover me} /> Helpful context without clutter. ); } ``` ### Icon-only controls with hover delay [#icon-only-controls-with-hover-delay] Use the `delay` prop to soften frequent hover interactions, especially in icon rows. ```tsx import { Button, Tooltip, TooltipContent, TooltipTrigger, } from "@tilt-legal/cubitt-components/primitives"; import { Bell, CircleInfo } from "@tilt-legal/cubitt-icons/ui/outline"; export default function Component() { return (
} /> Notifications stay muted for 1 hour. } /> Hover delay avoids accidental popovers.
); } ``` ## API Reference [#api-reference] ### Tooltip [#tooltip] | Prop | Type | Description | | -------------- | ------------------------- | --------------------------------------------------------------- | | `delay` | `number` | Time in milliseconds before the tooltip opens. Defaults to `0`. | | `open` | `boolean` | Controlled open state. | | `defaultOpen` | `boolean` | Initial open state when uncontrolled. | | `onOpenChange` | `(open: boolean) => void` | Callback fired when the open state changes. | | `disabled` | `boolean` | Prevents the tooltip from showing. | | `animated` | `boolean` | Enables or disables the default open/close animation. | | `className` | `string` | Additional classes passed to the tooltip root. | ### TooltipTrigger [#tooltiptrigger] | Prop | Type | Description | | ----------- | -------------------- | ---------------------------------------------------------------- | | `render` | `React.ReactElement` | The element that receives hover/focus events (e.g., a `Button`). | | `className` | `string` | Additional classes for the trigger wrapper. | ### TooltipContent [#tooltipcontent] | Prop | Type | Description | | ------------- | ---------------------------------------------- | ----------------------------------------------------- | | `side` | `"top"` \| `"right"` \| `"bottom"` \| `"left"` | Placement relative to the trigger. | | `sideOffset` | `number` | Gap between the trigger and tooltip. Defaults to `8`. | | `align` | `"start"` \| `"center"` \| `"end"` | Alignment relative to the trigger. | | `alignOffset` | `number` | Offset adjustment for `align`. | | `className` | `string` | Additional classes for the popup surface. | ### TooltipProvider [#tooltipprovider] | Prop | Type | Description | | ------- | -------- | -------------------------------------------------------- | | `delay` | `number` | Default delay applied to nested tooltips (milliseconds). | Wrap a subtree in `TooltipProvider` to set a global `delay` without passing it to every `Tooltip`.