v0.5.14

Tooltip

Displays informative text when hovering over or focusing an element.

Installation

pnpm add @wandercom/design-system-web

Usage

16 lines
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from '@wandercom/design-system-web/ui/tooltip';

export function Example() {
  return (
    <Tooltip>
      <TooltipTrigger>Hover me</TooltipTrigger>
      <TooltipContent>
        <p>Tooltip content</p>
      </TooltipContent>
    </Tooltip>
  );
}

Examples

Default

Loading example...
8 lines
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>

Props

Tooltip

open

boolean
Controlled open state.

defaultOpen

boolean
Uncontrolled default open state.

onOpenChange

(open: boolean) => void
Callback when open state changes.

delayDuration

number
Delay in milliseconds before tooltip shows. Defaults to 0.

TooltipTrigger

asChild

boolean
Renders child and merges props instead of rendering a button element. Uses Radix UI Slot.

TooltipContent

side

'top' | 'right' | 'bottom' | 'left'
Preferred side of the trigger to render against. Defaults to 'top'.

sideOffset

number
Distance in pixels from the trigger. Defaults to 0.

align

'start' | 'center' | 'end'
Alignment relative to the trigger. Defaults to 'center'.

className

string
Additional CSS classes.
Tooltip