popover

Content that opens beside a button, and closes on an outside click or Escape.

Example

Click away or press Escape to close.

Laravel

<x-admin::popover id="g-popover" label="Show details" icon="info">
    <p>Click away or press Escape to close.</p>
</x-admin::popover>

Props

PropRequiredDefaultOptions
idyes
labelnull
iconnull
variant"secondary"

Slots: trigger

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Popover } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<button type="button" class="adm-btn adm-btn--secondary" popovertarget="g-popover" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg>Show details</button>
<div id="g-popover" popover="auto" class="adm-popover"><p>Click away or press Escape to close.</p></div>