All components
Tooltip
Short contextual labels with a default panel style and an inverted variant.
Variants
inverted
Install
zsh — tooltip
1bunx stylexblocks add tooltipUsage — Base UI
tooltip.tsx
12345678910111213141516171819import { Tooltip } from "#components/ui/base-ui/tooltip.tsx";import { Button } from "#components/ui/base-ui/button.tsx";
export function Example() { return ( // variant="inverted" flips the surface; Provider groups delays across // tooltips, and Portal → Positioner → Popup is the real overlay chain. <Tooltip.Provider> <Tooltip.Root variant="inverted"> <Tooltip.Trigger render={<Button variant="surface" />}>Copy</Tooltip.Trigger> <Tooltip.Portal> <Tooltip.Positioner sideOffset={6}> <Tooltip.Popup>Copy to clipboard</Tooltip.Popup> </Tooltip.Positioner> </Tooltip.Portal> </Tooltip.Root> </Tooltip.Provider> );}