Wirestrap is still in active development

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

Generic floating panel built on @floating-ui/dom. Unlike tooltip and popover, it carries no semantic meaning, making it suitable for any floating UI: forms, navigation, previews, or custom content. Position and content stay in sync after each Livewire morph. Nested flyouts work as expected: a floating element inside another keeps its parent open.

Basic usage

The default slot is the trigger. Pass the panel content via the content slot. The default placement is bottom-start and the default trigger is hover. Set an id whenever you need append-body or the $wirestrap.flyout magic helper.

<x-wirestrap::flyout>
    <button>Jane Smith</button>

    <x-slot:content>
        Jane Smith
        Administrator · jane@example.com
    </x-slot:content>
</x-wirestrap::flyout>

Click trigger

Set trigger="click" to toggle the flyout on click instead of hover. Clicking anywhere outside closes it. The flyout stays open while interacting with its content: inputs, buttons, and nested floating elements all work as expected.

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

Placement

Accepts top, bottom, left, right, and their -start/-end variants. Defaults to bottom-start. Flips automatically if there is not enough room on the preferred side.

<x-wirestrap::flyout placement="bottom-start"> ... </x-wirestrap::flyout>
<x-wirestrap::flyout placement="bottom-end"> ... </x-wirestrap::flyout>
<x-wirestrap::flyout placement="top-start"> ... </x-wirestrap::flyout>
<x-wirestrap::flyout placement="right"> ... </x-wirestrap::flyout>

Anchor element

By default the flyout 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 flyout should appear near a specific part of it.

Hover me

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

    <x-slot:content> ... </x-slot:content>
</x-wirestrap::flyout>

Body append

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

<x-wirestrap::flyout
    id="action-menu"
    append-body
>
    ...
</x-wirestrap::flyout>

External control

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

Target

<button x-on:click="$wirestrap.flyout.show('action-menu')">Show</button>
<button x-on:click="$wirestrap.flyout.toggle('action-menu')">Toggle</button>

<x-wirestrap::flyout id="action-menu">
    <span>Target</span>

    <x-slot:content> ... </x-slot:content>
</x-wirestrap::flyout>

Props

Global configuration

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

x-wirestrap::flyout

Prop	Type	Default	Description
`id`	`string\|null`	`null`	Element id. Required when using append-body or the $wirestrap.flyout magic helper.
`content`	`ComponentSlot\|string`	`''`	Panel content. Slot attributes are forwarded to the flyout panel element.
`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.
`append-body`	`bool`	`config`	Teleport the flyout element to <body> to avoid overflow clipping and z-index issues. Requires id.
`offset-distance`	`int`	`config`	Distance between the trigger and the flyout in px.
`offset-skidding`	`int`	`config`	Lateral offset in px.
`position`	`string`	`config`	CSS positioning strategy: absolute or fixed.
No results found

$wirestrap.flyout

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

⭐ GitHub

Flyout