## Overview [#overview] The **Tooltip** component displays concise, non-essential context when users hover over or focus an element. Use it for short hints and visual labels; use inline text, popover, or toast when the information is required to complete a task. ## Usage [#usage] ```tsx import { Button } from "@tilt-legal/cubitt-components/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@tilt-legal/cubitt-components/tooltip"; ``` ```tsx }> Show tooltip Helpful context without clutter. ``` ## Examples [#examples] ### Default [#default] ```tsx import { Button } from "@tilt-legal/cubitt-components/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@tilt-legal/cubitt-components/tooltip"; export default function Component() { return ( }> Show tooltip Helpful context without clutter. ); } ``` ### Delay [#delay] Use `delay` when the trigger sits in a dense repeated control surface. ```tsx import { Button } from "@tilt-legal/cubitt-components/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@tilt-legal/cubitt-components/tooltip"; export default function Component() { return ( }> Delayed tooltip Shown after a short hover delay. ); } ``` ### Position [#position] Pass position props to `TooltipContent` when the default top placement is not the best fit. ```tsx import { Button } from "@tilt-legal/cubitt-components/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@tilt-legal/cubitt-components/tooltip"; export default function Component() { return (
}> Top Placed above the trigger. }> Right Placed to the right. }> Bottom Placed below the trigger.
); } ``` ## API Reference [#api-reference] ### Tooltip [#tooltip] | Prop | Type | Default | Description | | ----------------------- | ------------------------------------------------------------------- | -------- | ------------------------------------------------------- | | `delay` | `number` | `0` | Delay before this tooltip opens, in milliseconds. | | `open` | `boolean` | - | Controlled open state. | | `defaultOpen` | `boolean` | `false` | Initial open state when uncontrolled. | | `onOpenChange` | `(open: boolean, details: Tooltip.Root.ChangeEventDetails) => void` | - | Callback fired when the open state changes. | | `onOpenChangeComplete` | `(open: boolean) => void` | - | Callback fired after open or close animations complete. | | `disabled` | `boolean` | `false` | Prevents the tooltip from opening. | | `trackCursorAxis` | `"none" \| "x" \| "y" \| "both"` | `"none"` | Tracks the cursor on the selected axis. | | `disableHoverablePopup` | `boolean` | `false` | Closes the tooltip when the pointer leaves the trigger. | | `children` | `React.ReactNode` | - | Tooltip trigger and content parts. | ### TooltipTrigger [#tooltiptrigger] | Prop | Type | Default | Description | | -------------- | -------------------- | ------- | --------------------------------------------------------------- | | `render` | `React.ReactElement` | - | Element that receives hover and focus events, such as `Button`. | | `disabled` | `boolean` | `false` | Prevents this trigger from opening the tooltip. | | `closeOnClick` | `boolean` | `true` | Closes the tooltip when the trigger is clicked. | | `payload` | `unknown` | - | Payload passed to tooltip render-function children. | | `className` | `string` | - | Additional classes for the trigger element. | ### TooltipContent [#tooltipcontent] | Prop | Type | Default | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------ | | `side` | `"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"` | `"top"` | Preferred placement relative to the trigger. | | `sideOffset` | `number \| OffsetFunction` | `8` | Distance between the trigger and tooltip. | | `align` | `"start" \| "center" \| "end"` | `"center"` | Alignment relative to the trigger. | | `alignOffset` | `number \| OffsetFunction` | `0` | Offset along the alignment axis. | | `anchor` | `Element \| VirtualElement \| React.RefObject \| (() => Element \| VirtualElement \| null)` | - | Custom element or virtual element to position against. | | `positionMethod` | `"absolute" \| "fixed"` | `"absolute"` | CSS positioning method for the tooltip positioner. | | `className` | `string` | - | Additional classes for the popup surface. | | `children` | `React.ReactNode` | - | Tooltip content. | ### TooltipProvider [#tooltipprovider] | Prop | Type | Default | Description | | ------------ | ----------------- | ------- | ------------------------------------------------------------------ | | `delay` | `number` | `0` | Shared delay applied to nested tooltips. | | `closeDelay` | `number` | - | Shared delay before nested tooltips close. | | `timeout` | `number` | `400` | Window where adjacent tooltips open instantly after one was shown. | | `children` | `React.ReactNode` | - | Tooltip subtree. |