Preview

Controls

Theme

Surface

Direction

Viewport

Device view renders in an isolated frame so real responsive breakpoints apply. Switch to Full for overflowing popovers.

Installation

terminal

php artisan ui:add popover

Behavior layer (Alpine)

This component installs a self-registering Alpine module to resources/js/ui/popover.js. Import the behavior layer once from your bundle so it loads (it hooks alpine:init):

resources/js/ui/index.js JS

import './popover.js';

Registry contract

Install confidence

php artisan ui:add popover writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.2.3
License: open
Stability: stable
Contract: v2
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/components/ui/popover.blade.php
blade	resources/views/components/ui/popover/trigger.blade.php
blade	resources/views/components/ui/popover/content.blade.php
js	resources/js/ui/popover.js

Registry dependencies

None.

Package dependencies

composer: jml/brok:^1.0

npm: alpinejs

Guidance

Contextual overlay

Show lightweight contextual details or actions.

Use when

Use for lightweight contextual details or actions near a trigger. Do not use for long content, required reading, or complex interaction flows.
Showing compact contextual information or controls anchored to a trigger.
The user should be able to continue interacting with the page while it is open.

Avoid when

Keep it compact and anchored to its trigger; upgrade to a sheet, dialog, or page if the content grows.
Focus must be trapped or the task blocks the page; use dialog.
The content is only a short label; use tooltip.
The surface contains application navigation on small screens; use sheet.

Task length: micro
Interaction cost: medium
Interruptiveness: low
Input precision: none
Mobile / touch risk: high
Accessibility risk: high
Needs background context: Yes
Comparison needed: No

Preferred alternatives

Inline disclosure
Sheet or page for longer content

Anti-patterns

Required reading in a popover
Complex forms in fragile anchored overlays

Anatomy

root trigger content

Theming hooks

popover content popover arrow

Canonical examples

default
placements
with-header
form
menu
settings

Related: tooltip dropdown dialog sheet

API

manifest knowledge + registry-derived coverage

Props

Prop	Type / values	Default	Description
placement	top\|end\|bottom\|start	bottom	Preferred logical placement before collision handling.
align	start\|center\|end	center	Alignment against the trigger edge.
side	top\|bottom\|start\|end	bottom	Preferred panel placement. Start/end mirror under RTL.
arrow	bool	false	Declared by @props in the registry Blade source.

Slots

default — Compose trigger and content subcomponents.
x-ui.popover.trigger — Installed subcomponent from the registry item.
x-ui.popover.content — Installed subcomponent from the registry item.

Data slots

popover popover-arrow popover-content popover-trigger

Capabilities

wcag-2.2-aa-target interactive responsive rtl darkMode localized

Behavior

Dismisses on Escape and outside interaction without trapping focus.
Repositions to remain inside the viewport and returns focus predictably.
Non-modal panel with click-outside and Escape dismissal.
Installs a JavaScript behavior module when the registry item includes resources/js/ui files.
Declares registry capability flags: a11y, interactive, responsive, rtl, darkMode, localized.

Usage

previews.components.popover.default.blade.php Blade

@php($triggerClass = 'inline-flex h-10 items-center justify-center rounded-md border border-border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background')

<div class="flex flex-wrap items-center justify-center gap-3">
    {{-- Bottom (default) --}}
    <x-ui.popover>
        <x-ui.popover.trigger :class="$triggerClass">{{ __('Bottom') }}</x-ui.popover.trigger>
        <x-ui.popover.content>
            <div class="space-y-3">
                <div class="space-y-1">
                    <p class="text-sm font-medium text-foreground">{{ __('Dimensions') }}</p>
                    <p class="text-sm text-muted-foreground">{{ __('Set the dimensions for the layer.') }}</p>
                </div>
                <div class="space-y-2">
                    <x-ui.label for="width">{{ __('Width') }}</x-ui.label>
                    <x-ui.input id="width" value="100%" />
                </div>
            </div>
        </x-ui.popover.content>
    </x-ui.popover>

    {{-- Inline-start side (mirrors under RTL) --}}
    <x-ui.popover>
        <x-ui.popover.trigger :class="$triggerClass">{{ __('Start') }}</x-ui.popover.trigger>
        <x-ui.popover.content side="start" class="w-56">
            <p class="text-sm text-muted-foreground">{{ __('Opens toward the inline-start edge.') }}</p>
        </x-ui.popover.content>
    </x-ui.popover>

    {{-- Inline-end side (mirrors under RTL) --}}
    <x-ui.popover>
        <x-ui.popover.trigger :class="$triggerClass">{{ __('End') }}</x-ui.popover.trigger>
        <x-ui.popover.content side="end" class="w-56">
            <p class="text-sm text-muted-foreground">{{ __('Opens toward the inline-end edge.') }}</p>
        </x-ui.popover.content>
    </x-ui.popover>
</div>

Accessibility & localization

WCAG 2.2 AA RTL-ready data-slot Keyboard focus-visible Localized labels

Ensure interactive content is keyboard reachable.
Do not place critical confirmation workflows in a non-modal popover.
Uses semantic HTML and a stable data-slot attribute for styling/scripting hooks.
Focus-visible rings use the ring token so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces above.
Labels go through __() and the component uses logical properties (ms-*, text-start, start-*) so it mirrors correctly — flip the preview to RTL to confirm.

Source

The exact, editable file ui:add writes into your app — copy it or own the whole thing. Previews render this same code; there are no preview-only components.

Changelog

Current version: v1.2.3. See the site changelog for the full release history.

Popover