Popover

Displays supplementary information or content in a compact overlay without navigating away from the current page. Popovers provide contextual details or actions while maintaining focus on the primary interface.

Usage

Use popovers to show contextual help, tips, or additional options related to a specific element. Avoid using popovers as dropdowns and use the Menu component for selectable lists or navigation. The trigger should be clearly indicated.

API Reference

Component attribute(s)

x-h-popover
x-h-popover-trigger

Trigger and menu placement

The x-h-popover element must be placed somewhere AFTER the x-h-popover-trigger and they must have the same direct parent. Otherwise, the popover will not be able to find the trigger.

Attributes

x-h-popover-trigger

Attribute	Type	Required	Description
self	boolean	false	Boolean value, used to show and hide the popover programmatically. Disables the auto open/close functionality.

x-h-popover

Attribute	Type	Required	Description
data-align	bottom-start bottom bottom-end right-start right right-end left-start left left-end top-start top top-end	false	Aligns the popover body relative to the trigger.
data-innerclicks	boolean	false	Prevents the popover from closing when there is a click inside it. This is not a dynamic attribute. Its value is read on initialization and it is not monitored for changes.

Modifiers

x-h-popover-trigger

Modifier	Description
chevron	Rotates the last icon inside the trigger at 180 degrees.

x-h-popover

Modifier	Description
no-scroll	Used when the popover body must not scroll.

Examples

Popover

<button x-h-button x-h-popover-trigger>Popover</button>
<div class="w-64 p-4" x-h-popover>Popover content</div>

Disable closing on inner click events

<button x-h-button x-h-popover-trigger>Popover</button>
<div class="w-64 p-4" x-h-popover data-innerclicks="true">
  <button x-h-button data-variant="primary">Click</button>
</div>

Manually open and close the popover

<div x-data="{ open: false }">
  <button x-h-button x-h-popover-trigger="open" @click="open = !open">Popover</button>
  <div class="w-64 p-4" x-h-popover>Popover content</div>
</div>

Chevron

In order to use the chevron modifier, the trigger label must be placed inside a nested element (usually a span).

<button x-h-button x-h-popover-trigger.chevron>
  <span>Popover</span>
  <i role="img" data-lucide="chevron-down"></i>
</button>
<div class="p-4" x-h-popover>With chevron</div>

Alignment

<div class="flex flex-col" style="gap: 4rem">
  <div class="flex items-center justify-between gap-4">
    <button x-h-button x-h-popover-trigger>Bottom start</button>
    <div class="w-64 p-4" x-h-popover data-align="bottom-start">Bottom start content</div>
    <button x-h-button x-h-popover-trigger>Bottom</button>
    <div class="w-64 p-4" x-h-popover data-align="bottom">Bottom center content</div>
    <button x-h-button x-h-popover-trigger>Bottom end</button>
    <div class="w-64 p-4" x-h-popover data-align="bottom-end">Bottom end content</div>
  </div>
  <div class="flex items-center justify-between gap-4">
    <button x-h-button x-h-popover-trigger>Right start</button>
    <div class="w-64 p-4" x-h-popover data-align="right-start">Right start content</div>
    <button x-h-button x-h-popover-trigger>Left start</button>
    <div class="w-64 p-4" x-h-popover data-align="left-start">Left start content</div>
  </div>
  <div class="flex items-center justify-between gap-4">
    <button x-h-button x-h-popover-trigger>Right</button>
    <div class="w-64 p-4" x-h-popover data-align="right">Right center content</div>
    <button x-h-button x-h-popover-trigger>Left</button>
    <div class="w-64 p-4" x-h-popover data-align="left">Left center content</div>
  </div>
  <div class="flex items-center justify-between gap-4">
    <button x-h-button x-h-popover-trigger>Right end</button>
    <div class="w-64 p-4" x-h-popover data-align="right-end">Right end content</div>
    <button x-h-button x-h-popover-trigger>Left end</button>
    <div class="w-64 p-4" x-h-popover data-align="left-end">Left end content</div>
  </div>
  <div class="flex items-center justify-between gap-4">
    <button x-h-button x-h-popover-trigger>Top start</button>
    <div class="w-64 p-4" x-h-popover data-align="top-start">Top start content</div>
    <button x-h-button x-h-popover-trigger>Top</button>
    <div class="w-64 p-4" x-h-popover data-align="top">Top center content</div>
    <button x-h-button x-h-popover-trigger>Top end</button>
    <div class="w-64 p-4" x-h-popover data-align="top-end">Top end content</div>
  </div>
</div>