Tooltip

Hover- and focus-triggered hint with placement, delay, and rich-content options.

Basic

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

<.tooltip value="Favorite">
  <.button variant="ghost" size="icon-md">
    <.icon name="hero-star" class="icon" />
  </.button>
</.tooltip>

<.tooltip value="Download">
  <.button variant="ghost" size="icon-md">
    <.icon name="hero-arrow-down-tray" class="icon" />
  </.button>
</.tooltip>

Placement

Set the preferred side with placement. The tooltip flips and shifts when there is not enough room.

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

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

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

<.tooltip value="Left" placement="left">
  <.button variant="ghost">Left</.button>
</.tooltip>

Hover delay

Set the hover delay in ms with delay; delay={0} shows instantly. Once one tooltip opens, neighbors skip the delay for a short warmup window.

.heex 
<.tooltip value="Instant" delay={0}>
  <.button variant="ghost">Instant</.button>
</.tooltip>

<.tooltip value="Quick" delay={150}>
  <.button variant="ghost">Quick (150ms)</.button>
</.tooltip>

<.tooltip value="Patient" delay={600}>
  <.button variant="ghost">Patient (600ms)</.button>
</.tooltip>

Relative timestamp

Show a relative time inline and reveal the full date on hover.

Edited by Maya.
.heex 
<div class="text-sm">
  Edited
  <.tooltip value="May 2, 2026 at 14:32 UTC">
    <time class="underline decoration-dotted underline-offset-4 cursor-default">
      5 minutes ago
    </time>
  </.tooltip>
  by Maya.
</div>

Status indicator

Wrap a colored dot in a tooltip so hovering explains what the color means.

.heex 
<.tooltip value="Online">
  <span class="size-2.5 rounded-full bg-green-500 inline-block"></span>
</.tooltip>

<.tooltip value="Away for 12 minutes">
  <span class="size-2.5 rounded-full bg-amber-500 inline-block"></span>
</.tooltip>

<.tooltip value="Do not disturb">
  <span class="size-2.5 rounded-full bg-red-500 inline-block"></span>
</.tooltip>

<.tooltip value="Offline">
  <span class="size-2.5 rounded-full bg-zinc-400 inline-block"></span>
</.tooltip>

Custom colors

Classes passed via class stack on the defaults, so background, text color, padding, and shape can all be overridden.

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

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

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

Rich content

Skip value and use the :content slot for multi-line copy, headings, or any HEEx markup. Cap the width with class="max-w-*".

.heex 
<.tooltip class="max-w-[280px] p-3">
  <:content>
    <h4 class="font-semibold mb-1">Setup integration</h4>
    <p class="text-sm text-zinc-200">
      Connect your account to a third-party service to sync data automatically.
    </p>
  </:content>

  <.button variant="ghost">Hover for details</.button>
</.tooltip>

Image preview

The :content slot accepts images. The cursor can move onto the tooltip without dismissing it, so previews stay readable.

.heex 
<.tooltip class="p-1.5 max-w-[260px]">
  <:content>
    <img src={~p"/images/tooltip-image-1.png"} class="rounded-md w-full" />
    <div class="p-1 pt-2">
      <h4 class="font-medium mb-1 mt-2">Wireframe UI</h4>
      <p class="text-sm text-zinc-300">
        A visual guide for app layouts, showcasing key elements before the final design.
      </p>
    </div>
  </:content>

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

User profile

Hover an avatar or mention to surface a profile card with status and details.

.heex 
<.tooltip class="p-0 max-w-[260px] overflow-hidden">
  <:content>
    <div class="p-3.5 flex items-center gap-3">
      <div class="relative shrink-0">
        <img src={~p"/images/human-avatar-01.png"} class="size-11 rounded-full" />
        <span class="absolute bottom-0 right-0 size-2.5 rounded-full bg-emerald-500 ring-2 ring-tooltip"></span>
      </div>
      <div class="min-w-0">
        <p class="font-medium leading-tight truncate">Maya Hernandez</p>
        <p class="text-xs text-zinc-300 leading-tight mt-1 truncate">Senior Designer</p>
      </div>
    </div>
    <div class="border-t border-white/10 px-3.5 py-2 text-xs text-zinc-300 flex items-center justify-between">
      <span>Active now</span>
      <span>Berlin · 3:42 PM</span>
    </div>
  </:content>

  <button type="button" class="rounded-full">
    <img src={~p"/images/human-avatar-01.png"} class="size-9 rounded-full" />
  </button>
</.tooltip>

Keyboard shortcut

Pair an action label with its shortcut by composing the :content slot with a styled kbd.

.heex 
<.tooltip>
  <:content>
    <div class="flex items-center gap-2">
      <span>Bold</span>
      <kbd class="px-1.5 py-0.5 rounded text-xs bg-white/15 font-mono">⌘B</kbd>
    </div>
  </:content>

  <.button variant="ghost" size="icon-md">
    <.icon name="hero-bold" class="icon" />
  </.button>
</.tooltip>

<.tooltip>
  <:content>
    <div class="flex items-center gap-2">
      <span>Italic</span>
      <kbd class="px-1.5 py-0.5 rounded text-xs bg-white/15 font-mono">⌘I</kbd>
    </div>
  </:content>

  <.button variant="ghost" size="icon-md">
    <.icon name="hero-italic" class="icon" />
  </.button>
</.tooltip>

<.tooltip>
  <:content>
    <div class="flex items-center gap-2">
      <span>Underline</span>
      <kbd class="px-1.5 py-0.5 rounded text-xs bg-white/15 font-mono">⌘U</kbd>
    </div>
  </:content>

  <.button variant="ghost" size="icon-md">
    <.icon name="hero-underline" class="icon" />
  </.button>
</.tooltip>

External trigger

Point target at a CSS selector when the trigger can't be a direct child. The tooltip listens for hover and focus on the matched element.

.heex 
<button id="external-trigger" type="button" class="underline">
  Hover this external element
</button>

<.tooltip value="Targeting an element by selector" target="#external-trigger">
  <span></span>
</.tooltip>

Form field help

Place a tooltip inside an input's :inner_suffix slot to attach contextual help without crowding the label.

.heex 
<.input type="text" name="api_key" label="API Key" value="">
  <:inner_suffix>
    <.tooltip
      value="Your API key can be found in the developer settings"
      placement="top"
    >
      <.icon name="hero-question-mark-circle" class="icon text-foreground-softer" />
    </.tooltip>
  </:inner_suffix>
</.input>