All components
Tooltip
Short contextual labels with a default panel style and an inverted variant.
Variants
inverted
Install
zsh — tooltip
1bunx stylexblocks add tooltipUsage — Ark UI
tooltip.tsx
12345678910111213141516171819202122import { Tooltip } from "#components/ui/ark-ui/tooltip.tsx";import { Button } from "#components/ui/ark-ui/button.tsx";
export function Example() { return ( // variant="inverted" flips the surface; the positioner portals to // <body> and the machine handles hover intent and delays. <Tooltip.Root variant="inverted" openDelay={200} closeDelay={100}> <Tooltip.Trigger asChild> <Button variant="surface">Copy</Button> </Tooltip.Trigger> <Tooltip.Positioner> <Tooltip.Content> <Tooltip.Arrow> <Tooltip.ArrowTip /> </Tooltip.Arrow> Copy to clipboard </Tooltip.Content> </Tooltip.Positioner> </Tooltip.Root> );}