PUI.Popover (pui v1.0.0-beta.14)

Copy Markdown

Popover and tooltip components using Floating UI for positioning.

Base Popover

The base popover provides low-level building blocks for custom popover UIs:

<.popover_base
  id="my-popover"
  phx-hook="PUI.Popover"
  data-placement="bottom"
>
  <.button aria-haspopup="menu">Click Me</.button>

  <:popup class="aria-hidden:hidden block p-4 bg-popover rounded-md shadow-md">
    <p>Popover content here</p>
  </:popup>
</.popover_base>

Tooltip

Tooltips appear on hover with configurable placement:

<.tooltip id="tooltip-1" placement="top">
  <.button>Hover me</.button>
  <:tooltip>This is a tooltip</:tooltip>
</.tooltip>

Placement Options

<.tooltip placement="top">...</.tooltip>
<.tooltip placement="bottom">...</.tooltip>
<.tooltip placement="left">...</.tooltip>
<.tooltip placement="right">...</.tooltip>

Variants

<.tooltip variant="default">...</.tooltip>
<.tooltip variant="light">...</.tooltip>
<.tooltip variant="dark">...</.tooltip>
<.tooltip variant="unstyled">...</.tooltip>

Custom Arrow Color

<.tooltip arrow_class="bg-blue-500 fill-blue-500">...</.tooltip>

With Icons

<.tooltip id="icon-tooltip" placement="bottom">
  <.icon name="hero-information-circle" class="size-5" />
  <:tooltip>More information about this</:tooltip>
</.tooltip>

Rich Content

<.tooltip id="rich-tooltip">
  <.button>Hover for details</.button>
  <:tooltip>
    <div class="w-[200px]">
      <img src="..." class="rounded-t-md" />
      <div class="p-2">
        <p class="font-medium">Title</p>
        <p class="text-sm">Description text</p>
      </div>
    </div>
  </:tooltip>
</.tooltip>

Attributes (base/1)

AttributeTypeDefaultDescription
idstringrequiredUnique identifier
hookstring"Popover"Phoenix hook name

Attributes (tooltip/1)

AttributeTypeDefaultDescription
idstringauto-generatedUnique identifier
placementstring"top"Tooltip position
variantstring"default"Visual variant: "default" (dark), "light", "dark", "unstyled"
arrow_classstring""Custom CSS classes for the arrow element
classstring""Additional CSS classes

Slots (base/1)

SlotDescription
triggerThe element that triggers the popover
popupThe popover content
inner_blockAlternative to trigger slot

Slots (tooltip/1)

SlotDescription
inner_blockThe element that triggers the tooltip
tooltipThe tooltip content

Summary

Functions

base(assigns)
tooltip(assigns)

Functions

base(assigns)

Attributes

  • id (:string) (required)
  • variant (:string) - Defaults to "default". Must be one of "default", or "unstyled".
  • hook (:string) - Defaults to "Popover".
  • Global attributes are accepted. the arbitrary HTML attributes to add to the flash container.

Slots

  • trigger - Trigger for the popover. Accepts attributes:
    • class (:string) - Trigger class.
    • role (:string) - Trigger aria role.
  • popup - Popup for the popover. Accepts attributes:
    • class (:string) - Popup class.
    • role (:string) - Popup role.
  • inner_block - Inner block / children for the popover, can be used for non <button> custom trigger.

tooltip(assigns)

Attributes

  • id (:string)
  • class (:string) - Defaults to "".
  • container_class (:string) - Defaults to "".
  • variant (:string) - Defaults to "default". Must be one of "default", "light", "dark", or "unstyled".
  • arrow_class (:string) - Defaults to "".
  • placement (:string) - Defaults to "top". Must be one of "top", "bottom", "left", or "right".

Slots

  • inner_block
  • tooltip - Accepts attributes:
    • class (:string)