Tooltip(
  [Button([text('Hover me')])],
  tip: 'hello',
)

Tooltip(
  [Button([text('Hover me')])],
  content: TooltipContent([
    div(
      [text('Wow!')],
      // Use `classes` for custom Tailwind utilities.
      classes: 'animate-bounce text-orange-400 -rotate-10 text-2xl font-black',
    ),
  ]),
)

Tooltip(
  [Button([text('Force open')])],
  tip: 'hello',
  style: [Tooltip.open],
)

// Default is `top`, but can be set explicitly.
Tooltip([Button([text('Top')])], tip: 'hello', style: [Tooltip.top]),
Tooltip([Button([text('Bottom')])], tip: 'hello', style: [Tooltip.bottom]),
Tooltip([Button([text('Left')])], tip: 'hello', style: [Tooltip.left]),
Tooltip([Button([text('Right')])], tip: 'hello', style: [Tooltip.right]),

Tooltip(
  [Button([text('neutral')], style: [Button.neutral])],
  tip: 'neutral',
  style: [Tooltip.open, Tooltip.neutral],
)

Tooltip(
  [Button([text('primary')], style: [Button.primary])],
  tip: 'primary',
  style: [Tooltip.open, Tooltip.primary],
)

Tooltip(
  [Button([text('secondary')], style: [Button.secondary])],
  tip: 'secondary',
  style: [Tooltip.open, Tooltip.secondary],
)

Tooltip(
  [Button([text('accent')], style: [Button.accent])],
  tip: 'accent',
  style: [Tooltip.open, Tooltip.accent],
)

Tooltip(
  [Button([text('info')], style: [Button.info])],
  tip: 'info',
  style: [Tooltip.open, Tooltip.info],
)

Tooltip(
  [Button([text('success')], style: [Button.success])],
  tip: 'success',
  style: [Tooltip.open, Tooltip.success],
)

Tooltip(
  [Button([text('warning')], style: [Button.warning])],
  tip: 'warning',
  style: [Tooltip.open, Tooltip.warning],
)

Tooltip(
  [Button([text('error')], style: [Button.error])],
  tip: 'error',
  style: [Tooltip.open, Tooltip.error],
)

Tooltip(
  [Button([text('Hover me')])],
  tip: 'hello',
  // When a component's base class needs a responsive prefix,
  // use the `classes` property as an escape hatch.
  classes: 'lg:tooltip',
)