Docs

Tooltip

Contextual information on hover or focus.

<.tooltip value="Share">
  <.button variant="ghost"><.icon name="hero-share" class="size-4" /></.button>
</.tooltip>

Content

Show text, icons, or custom content in tooltips for additional context.

<.tooltip>
  <.button variant="ghost">Tooltip</.button>

  <:content>
    <h4 class="font-semibold">Setup integration</h4>
    <p>Setup an integration to connect your account to a third-party service.</p>
  </:content>
</.tooltip>

Placement

Position tooltips in various directions relative to the trigger element.

<.tooltip value="Top" placement="right">
  <.button variant="ghost">Top</.button>
</.tooltip>

<.tooltip value="Bottom" placement="bottom">
  <.button variant="ghost">Bottom</.button>
</.tooltip>

Customization

Apply custom styles to tooltips for seamless design integration.

<.tooltip value="Share" class="bg-blue-600 text-white">
  <.button variant="ghost"><.icon name="hero-share" class="size-4" /></.button>
</.tooltip>

<.tooltip value="Favorite" class="rounded-full px-4 bg-purple-600 text-white">
  <.button variant="ghost"><.icon name="hero-star" class="size-4" /></.button>
</.tooltip>

<.tooltip value="Download" class="bg-green-600 text-white font-medium text-xs">
  <.button variant="ghost"><.icon name="hero-arrow-down-tray" class="size-4" /></.button>
</.tooltip>

Delay

Set show and hide delays to prevent accidental triggering of tooltips.

<.tooltip value="Share" delay={250}>
  <.button variant="ghost"><.icon name="hero-share" /></.button>
</.tooltip>