data-theme = lofi
Popover
点击（或悬停）在触发器旁浮起的面板。介于 dropdown 和 tooltip 之间 — 可放任意内容（信息卡 / 迷你表单 / 确认提示）。4 个放置位置（上/右/下/左）CSS 定位（无碰撞检测），可选箭头，trigger="click"（默认）/ "hover"。Alpine 驱动，ESC 或外部点击关闭。
default
placement=bottom, arrow=true, trigger=click — Help ボタンをクリックして情報パネルを開く
About this field
Enter the email address you used at signup. We'll send a reset link if it matches an account.
4 placements — top / right / bottom / left
placement="top" の panel。trigger をクリック / もう一度クリック で閉じる。
placement="right" の panel。trigger をクリック / もう一度クリック で閉じる。
placement="bottom" の panel。trigger をクリック / もう一度クリック で閉じる。
placement="left" の panel。trigger をクリック / もう一度クリック で閉じる。
confirmation prompt — Delete ボタンの直上に確認
Delete this item?
This action can't be undone.
mini form — フィルタ panel
Filter results
trigger=hover — info-only popover (inputs を含めると操作不能)
出張時間は
JST
Japan Standard Time (UTC+9)
で表示されます。
context menu — `arrow=false` + `padding="p-1"` で行のオーバーヘッドを除去 (v0.3.20 から)
使い方
{{-- 最小 — triggerSlot + slot --}}
<x-popover>
<x-slot:triggerSlot>
<x-button size="sm">Help</x-button>
</x-slot:triggerSlot>
<p>Panel content here.</p>
</x-popover>
{{-- placement: top / right / bottom (default) / left --}}
<x-popover placement="top">...</x-popover>
{{-- width: Tailwind utility (default w-72) --}}
<x-popover width="w-80">...</x-popover>
{{-- arrow off — context menu 風 --}}
<x-popover :arrow="false">...</x-popover>
{{-- trigger=hover (info-only, inputs を含めない) --}}
<x-popover trigger="hover" placement="top">
<x-slot:triggerSlot><span class="underline decoration-dotted">JST</span></x-slot:triggerSlot>
<p>Japan Standard Time (UTC+9)</p>
</x-popover>
{{-- panel 内から閉じる — Alpine の open が wrapper scope に居る --}}
<x-popover>
<x-slot:triggerSlot><x-button>Confirm</x-button></x-slot:triggerSlot>
<p>Delete this?</p>
<x-button x-on:click="open = false">Cancel</x-button>
</x-popover>
data-theme = night
Popover
点击（或悬停）在触发器旁浮起的面板。介于 dropdown 和 tooltip 之间 — 可放任意内容（信息卡 / 迷你表单 / 确认提示）。4 个放置位置（上/右/下/左）CSS 定位（无碰撞检测），可选箭头，trigger="click"（默认）/ "hover"。Alpine 驱动，ESC 或外部点击关闭。
default
placement=bottom, arrow=true, trigger=click — Help ボタンをクリックして情報パネルを開く
About this field
Enter the email address you used at signup. We'll send a reset link if it matches an account.
4 placements — top / right / bottom / left
placement="top" の panel。trigger をクリック / もう一度クリック で閉じる。
placement="right" の panel。trigger をクリック / もう一度クリック で閉じる。
placement="bottom" の panel。trigger をクリック / もう一度クリック で閉じる。
placement="left" の panel。trigger をクリック / もう一度クリック で閉じる。
confirmation prompt — Delete ボタンの直上に確認
Delete this item?
This action can't be undone.
mini form — フィルタ panel
Filter results
trigger=hover — info-only popover (inputs を含めると操作不能)
出張時間は
JST
Japan Standard Time (UTC+9)
で表示されます。
context menu — `arrow=false` + `padding="p-1"` で行のオーバーヘッドを除去 (v0.3.20 から)
使い方
{{-- 最小 — triggerSlot + slot --}}
<x-popover>
<x-slot:triggerSlot>
<x-button size="sm">Help</x-button>
</x-slot:triggerSlot>
<p>Panel content here.</p>
</x-popover>
{{-- placement: top / right / bottom (default) / left --}}
<x-popover placement="top">...</x-popover>
{{-- width: Tailwind utility (default w-72) --}}
<x-popover width="w-80">...</x-popover>
{{-- arrow off — context menu 風 --}}
<x-popover :arrow="false">...</x-popover>
{{-- trigger=hover (info-only, inputs を含めない) --}}
<x-popover trigger="hover" placement="top">
<x-slot:triggerSlot><span class="underline decoration-dotted">JST</span></x-slot:triggerSlot>
<p>Japan Standard Time (UTC+9)</p>
</x-popover>
{{-- panel 内から閉じる — Alpine の open が wrapper scope に居る --}}
<x-popover>
<x-slot:triggerSlot><x-button>Confirm</x-button></x-slot:triggerSlot>
<p>Delete this?</p>
<x-button x-on:click="open = false">Cancel</x-button>
</x-popover>