Popover & Tooltip

Popover and tooltip components using Floating UI for precise positioning.

Base Popover

Low-level popover building blocks using Floating UI for positioning.

<.popover_base
id="demo-popover-base"
class="w-fit"
phx-hook="PUI.Popover"
data-placement="bottom"
>
<.button aria-haspopup="menu">
Open Popover
</.button>

<:popup class="aria-hidden:hidden block min-w-[250px] bg-popover text-popover-foreground rounded-md shadow-md border border-border p-4 z-50">
<div class="space-y-2">
  <p class="font-medium">Popover Content</p>
  <p class="text-sm opacity-90">This is a popover with custom content.</p>
  <.button size="sm" class="mt-2">
    Action Button
  </.button>
</div>
</:popup>
</.popover_base>

Tooltip Variants

Tooltips with different placements (top, bottom, left, right) and triggers.

<.tooltip id="tooltip-left" placement="left">
<.button variant="outline" size="icon">
<.icon name="hero-arrow-left" class="w-4 h-4" />
</.button>
<:tooltip>Tooltip on the left</:tooltip>
</.tooltip>

<.tooltip id="tooltip-top" placement="top">
<.button variant="outline">Tooltip Top</.button>
<:tooltip>Tooltip appears above the trigger</:tooltip>
</.tooltip>

<.tooltip id="tooltip-bottom" placement="bottom">
<.button variant="outline" size="icon">
<.icon name="hero-arrow-down" class="w-4 h-4" />
</.button>
<:tooltip>Tooltip on the bottom</:tooltip>
</.tooltip>

<.tooltip id="tooltip-right" placement="right">
<.button variant="outline" size="icon">
<.icon name="hero-arrow-right" class="w-4 h-4" />
</.button>
<:tooltip>Tooltip on the right</:tooltip>
</.tooltip>

Tooltip with Icons

Tooltips triggered by icon buttons, useful for information hints.

Hover for info:

Status:

Settings:

<.tooltip id="tooltip-info" placement="top">
<.icon name="hero-information-circle" class="w-5 h-5 text-zinc-500 cursor-help" />
<:tooltip>This provides additional context about the feature.</:tooltip>
</.tooltip>

<.tooltip id="tooltip-status" placement="bottom">
<span class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-green-500"></span>
<span class="text-sm">Active</span>
</span>
<:tooltip>System is running normally with all services operational.</:tooltip>
</.tooltip>

<.tooltip id="tooltip-settings" placement="top">
<.button variant="ghost" size="icon" class="h-8 w-8">
<.icon name="hero-cog-6-tooth" class="w-4 h-4" />
</.button>
<:tooltip>Configure settings</:tooltip>
</.tooltip>

Popover with Actions

Interactive popover with counter state that persists between interactions.

<.popover_base
id="demo-popover-action"
class="w-fit"
phx-hook="PUI.Popover"
data-placement="bottom"
>
<.button variant="secondary" aria-haspopup="menu">
Counter: {@counter}
</.button>

<:popup class="aria-hidden:hidden block min-w-[200px] bg-popover text-popover-foreground rounded-md shadow-md border border-border p-4 z-50">
<div class="space-y-3">
  <p class="font-medium">Interactive Popover</p>
  <p class="text-sm text-zinc-600 dark:text-zinc-400">
    Current count: <span class="font-bold">{@counter}</span>
  </p>
  <.button size="sm" phx-click="click" class="w-full">
    Increment
  </.button>
</div>
</:popup>
</.popover_base>

Rich Content Tooltip

Tooltips can contain rich content like images and formatted text.

<.tooltip id="tooltip-rich" placement="bottom" class="p-0! max-w-[200px]">
<.button variant="outline">Hover for Preview</.button>
<:tooltip>
<div class="w-[200px]">
  <div class="h-24 bg-gradient-to-br from-blue-400 to-purple-500 rounded-t-md">
    <!-- Content -->
  </div>
  <div class="p-3">
    <p class="font-medium text-sm">Rich Tooltip</p>
    <p class="text-xs text-zinc-400 mt-1">
      Tooltips can contain any HTML content.
    </p>
  </div>
</div>
</:tooltip>
</.tooltip>

Props

Name	Type	Default	Description
id	string	-	Unique identifier
placement	string	top	Tooltip position (top, bottom, left, right)
class	string	nil	Additional CSS classes
phx-hook	string	PUI.Popover	Phoenix hook for popover base
data-placement	string	top	Popover placement attribute