Tooltip

Hover hint anchored to a trigger.

Installation

npx @noarka/cli add tooltip

Usage

tsx

import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@noarka/ui";

tsx

<Tooltip>  <TooltipTrigger render={<Button variant="ghost">Need help?</Button>} />  <TooltipContent side="top">Our team replies within a day.</TooltipContent></Tooltip>

Examples

Sides

Anchor the popup to any side of the trigger.

Shared delay

Group tooltips under one provider to share open timing.

Long content

Content wraps at the max width.

API reference

TooltipProvider

Prop	Type	Default
`delay` Shared open delay in milliseconds for grouped tooltips.	`number`	`500`
`closeDelay` Shared close delay in milliseconds.	`number`	`-`

Tooltip

Prop	Type	Default
`open` Controlled open state. Use with onOpenChange.	`boolean`	`-`
`defaultOpen` Initially open when uncontrolled.	`boolean`	`false`
`onOpenChange` Called when the tooltip opens or closes.	`(open: boolean) => void`	`-`
`disabled` Disable the tooltip.	`boolean`	`false`

TooltipTrigger

Prop	Type	Default
`render` Render a custom trigger element, e.g. render={<Button>Hover me</Button>}.	`ReactElement \| ((props) => ReactNode)`	`-`
`disabled` Disable the trigger.	`boolean`	`false`

TooltipContent

Prop	Type	Default
`side` Preferred placement side.	`"top" \| "right" \| "bottom" \| "left"`	`-`
`sideOffset` Gap between trigger and popup.	`number`	`8`
`align` Alignment against the trigger edge.	`"start" \| "center" \| "end"`	`-`
`alignOffset` Offset along the alignment axis.	`number`	`-`
`render` Polymorphic render prop. Use to render a custom element instead of the default popup.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default popup styles.	`string`	`-`