Tooltip Component Playground

Interactive playground to test all Tooltip props and variants

Props

Trigger Text

Trigger Variant

Title

Optional: Bold title text shown above content

Content

Main content text displayed in the tooltip

Placement

Max Width (px)

Maximum width of the tooltip (default: 328px)

Delay Duration (ms)

Delay before showing tooltip (default: 0ms)

Show Close Button

Controlled (Manual Open/Close)

Current State

Placement: top-start

Max Width: 328px

Show Close: Yes

Controlled: No

Preview

Code

<TooltipProvider>
  <Tooltip
    trigger={<IconButton variant="primary">Hover me</IconButton>}
  title="Title Text"
  placement="top-start"
  >
    Tooltip content goes here
  </Tooltip>
</TooltipProvider>

Props (JSON)

{
  "placement": "top-start",
  "showCloseButton": true,
  "maxWidth": 328,
  "title": "Title Text",
  "trigger": "(ReactNode)",
  "children": "Tooltip content goes here"
}

All Placements