Flyout

A flyout displays content in an overlay, triggered by a button.

Demo

Open

Flyouts can be used for menus or dropdowns.

Anatomy Directives

flyout.html

<div x-init x-flyout.hoverable>
  <button x-flyout:trigger>Open</button>

  <div x-flyout:content x-cloak>
    <p>Flyouts can be used for menus or dropdowns.</p>

    <a href="#anatomy">Anatomy</a>
    <a href="#directives">Directives</a>
  </div>
</div>

Features

• Can open flyout on hover

View Source (opens in new tab)

Anatomy

<div x-init x-flyout>
  <button x-flyout:trigger></button>
  <div x-flyout:content></div>
</div>

Note

Notice the x-init in the markup. This is required for Alpine to detect and run directives.

Directives

x-flyout

Required

---

The root element for the flyout.

Modifier	Description
.hoverable	Opens flyout on hover. Flyout automatically closes when cursor moves outside.

Event	Description	detail
flyout:change	Whether the flyout is open or closed.	{ open: boolean }

Data Attribute	Values
[data-state]	open | closed

x-flyout:trigger

Required

---

Trigger button that opens or closes the flyout content.

Event	Description	detail
flyout:change	Whether the flyout is open or closed.	{ open: boolean }

Data Attribute	Values
[data-state]	open | closed

x-flyout:content

Required

---

The content that will be shown or hidden.

Event	Description	detail
flyout:change	Whether the flyout is open or closed.	{ open: boolean }

Data Attribute	Values
[data-state]	open | closed