Tooltip
OverlaysShort text hint anchored to a trigger element.
Non-interactive floating label that appears on hover/focus. Compose from TooltipProvider, Tooltip, TooltipTrigger, TooltipContent. The content renders in Space Mono uppercase at 11px.
Usage
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "nosible-ux"
import { ActionIcon } from "nosible-ux"
import { Download } from "lucide-react"
export default function Example() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<ActionIcon aria-label="Export signals">
<Download size={16} />
</ActionIcon>
</TooltipTrigger>
<TooltipContent>Export signals</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}Examples
With arrow
Accessibility
Tooltip content is hidden from the accessibility tree until visible. The trigger already needs its own accessible label; the tooltip supplements rather than provides it.
Props
| Name | Type | Default | Description |
|---|---|---|---|
align | "center" | "start" | "end" | undefined | — | |
alignOffset | number | undefined | — | |
aria-label | string | undefined | — | A more descriptive label for accessibility purpose |
arrowPadding | number | undefined | — | |
asChild | boolean | undefined | — | |
avoidCollisions | boolean | undefined | — | |
collisionBoundary | Boundary | Boundary[] | undefined | — | |
collisionPadding | number | Partial<Record<"top" | "bottom" | "left" | "right", number>> | undefined | — | |
forceMount | true | undefined | — | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
hideWhenDetached | boolean | undefined | — | |
onEscapeKeyDown | ((event: KeyboardEvent) => void) | undefined | — | Event handler called when the escape key is down. Can be prevented. |
onPointerDownOutside | ((event: PointerDownOutsideEvent) => void) | undefined | — | Event handler called when the a `pointerdown` event happens outside of the `Tooltip`. Can be prevented. |
showArrow | boolean | undefined | false | When true, renders an 8×8 SVG arrow pointing toward the trigger. |
side | "top" | "bottom" | "left" | "right" | undefined | — | |
sideOffset | number | undefined | — | |
sticky | "partial" | "always" | undefined | — | |
updatePositionStrategy | "always" | "optimized" | undefined | — |