Popover

Floating panel with header and body, built on @floating-ui/dom. Wraps any trigger element and positions itself relative to it, automatically flipping and shifting to stay within the viewport. Position and content stay in sync after each Livewire morph. Nested popovers work as expected: a floating element inside another keeps its parent open.

Basic usage

Use the header and content slots for panel content, both also accept plain strings as props. The default slot is the trigger. The default trigger is hover. Set an id whenever you need teleport or the $wirestrap.popover magic helper.

<x-wirestrap::popover>
    <button>More info</button>

    <x-slot:header>Details</x-slot:header>
    <x-slot:content>Here is some additional context.</x-slot:content>
</x-wirestrap::popover>

Placement

Accepts top, bottom, left, right, and their -start/-end variants. Defaults to top. If there is not enough room on the preferred side, the popover flips to the opposite side and shifts to stay visible.

<x-wirestrap::popover placement="top"> ... </x-wirestrap::popover>
<x-wirestrap::popover placement="bottom"> ... </x-wirestrap::popover>
<x-wirestrap::popover placement="left"> ... </x-wirestrap::popover>
<x-wirestrap::popover placement="right"> ... </x-wirestrap::popover>

Anchor element

By default the popover anchors to the trigger wrapper. Add data-ws-anchor to any element inside the slot to use it as the anchor instead, useful when the trigger covers a larger area but the popover should appear near a specific part of it.

<x-wirestrap::popover>
    <div>
        <span>Hover me</span>
        <span data-ws-anchor></span>
    </div>

    <x-slot:header> ... </x-slot:header>
    <x-slot:content> ... </x-slot:content>
</x-wirestrap::popover>

Click trigger

Set trigger="click" to toggle the popover on click instead of hover. Clicking anywhere outside closes it.

<x-wirestrap::popover trigger="click"> ... </x-wirestrap::popover>

Clipping

The popover uses position: absolute by default, which means it can be clipped by a parent with overflow: hidden or confined to a CSS stacking context. Two escape hatches are available:

• teleport="body" moves the popover outside the component's DOM tree entirely to the given selector, via Livewire's @teleport directive. It escapes all stacking contexts and still uses absolute positioning relative to the target, so there is no viewport recalculation on scroll. This is the recommended approach.
• position="fixed" positions the popover relative to the viewport, which escapes most clipping scenarios but not all. Every scroll event while the popover is open triggers a viewport recalculation. Prefer teleport unless you have a reason to avoid moving the popover in the DOM.

{{-- Default: absolute positioning --}}
<x-wirestrap::popover ...> ... </x-wirestrap::popover>

{{-- Escape most clipping scenarios, at the cost of viewport recalculations --}}
<x-wirestrap::popover ... position="fixed"> ... </x-wirestrap::popover>

{{-- Move the popover outside the DOM tree entirely, escaping all stacking contexts --}}
<x-wirestrap::popover id="my-popover" teleport="body"> ... </x-wirestrap::popover>

External control

Use the $wirestrap.popover Alpine magic helper to show, hide, or toggle any popover by id from anywhere on the page.

<button x-on:click="$wirestrap.popover.show('info-card')">Show</button>
<button x-on:click="$wirestrap.popover.toggle('info-card')">Toggle</button>

<x-wirestrap::popover id="info-card"> ... </x-wirestrap::popover>

Global configuration

Call Wirestrap.floating.configure() once at boot to configure shared behavior across all floating components (flyout, popover, tooltip).

Wirestrap.floating.configure({
    keepShownFor: ['.flatpickr-calendar', '.my-select-panel'],
});

Props

x-wirestrap::popover

$wirestrap.popover

Wirestrap.floating.configure()