Tooltip

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

<.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>

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

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

<.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>

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