Tooltip

Contextual information on hover or focus.

<.tooltip value="Share">
  <.button ghost><.icon name="u-share-06 icon" /></.button>
</.tooltip>

Content

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

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

  <.button variant="ghost">Tooltip</.button>
</.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 ghost><.icon name="u-share-06 icon" /></.button>
</.tooltip>

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

<.tooltip value="Download" class="bg-green-600 text-white font-medium text-xs">
  <.button ghost><.icon name="u-download-01 icon" /></.button>
</.tooltip>

Delay

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

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