Wirestrap is still in active development

This project is pre-1.0 and may introduce breaking changes at any time without prior notice.

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 append-body 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.

Hover me

<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>

Body append

By default the popover lives inside the component's DOM subtree. If an ancestor has overflow: hidden or a low z-index stacking context, the popover may be clipped or obscured. Pass append-body to teleport it to <body> instead, which requires an id.

<x-wirestrap::popover
    id="modal-tip"
    append-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.

Target

<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>

Props

Global configuration

Most prop defaults can be overridden globally via config/wirestrap.php.

x-wirestrap::popover

Prop	Type	Default	Description
`id`	`string\|null`	`null`	Element id. Required when using append-body or the $wirestrap.popover magic helper.
`header`	`ComponentSlot\|string`	`''`	Header text. Use the header slot for HTML content.
`content`	`ComponentSlot\|string`	`''`	Body text. Use the content slot for HTML content.
`placement`	`string`	`config`	Preferred placement: top, bottom, left, right, and -start/-end variants. Flips automatically if out of bounds.
`trigger`	`string`	`config`	Show trigger: hover or click.
`arrow`	`bool`	`true`	Show the directional arrow.
`append-body`	`bool`	`config`	Teleport the popover element to <body> to avoid overflow clipping and z-index issues. Requires id.
`offset-distance`	`int`	`config`	Distance between the trigger and the popover in px.
`offset-skidding`	`int`	`config`	Lateral offset in px.
`position`	`string`	`config`	CSS positioning strategy: absolute or fixed.
No results found

$wirestrap.popover

Method	Type	Default	Description
`$wirestrap.popover.show(id)`	`--`	`--`	Show the popover with the given id.
`$wirestrap.popover.hide(id)`	`--`	`--`	Hide the popover with the given id.
`$wirestrap.popover.toggle(id)`	`--`	`--`	Toggle the popover with the given id.
No results found

⭐ GitHub

Popover