Popover
An info bubble, with an optional title, that opens when the trigger is clicked. Suitable for explanations a few sentences long; for one-line hints, use acun:tooltip.
Basic usage
Put the trigger in the trigger slot and the content in the default slot; title adds a separate header row at the top. The bubble closes when the trigger is clicked again, on a click outside, or with Esc.
<acun:popover title="Return policy">
<acun:slot:trigger><acun:button variant="white" size="sm">Why can't it be returned?</acun:button></acun:slot:trigger>
Products can be returned within 14 days of delivery. This order was delivered on September 12.
</acun:popover>| Prop | Values |
|---|---|
title | Header row |
trigger | Slot; opens the bubble when clicked |
Position and alignment
position="top" opens the bubble above the trigger; the default is below. align="end" aligns the bubble to the right edge of the trigger, which prevents overflow for buttons on the right side of the page.
<div class="flex flex-wrap justify-between gap-4">
<acun:popover position="top" title="Shipping info">
<acun:slot:trigger><acun:button variant="white" size="sm">Opens on top</acun:button></acun:slot:trigger>
The 148 orders at the Kadıköy warehouse ship on Tuesday.
</acun:popover>
<acun:popover align="end" title="Shipping info">
<acun:slot:trigger><acun:button variant="white" size="sm">Aligned right</acun:button></acun:slot:trigger>
The 205 orders at the Ankara warehouse ship on Thursday.
</acun:popover>
</div>| Prop | Values |
|---|---|
position | bottom | top |
align | start | end |
No title, rich content
Without a title, the bubble consists of the content only. You can put links or buttons in the content; a given class is added to the content area. The bubble has a fixed width (18rem).
<div class="flex items-center gap-2 text-sm text-gray-700 dark:text-zinc-300">
Status: <acun:badge variant="warning">Delivery failed</acun:badge>
<acun:popover>
<acun:slot:trigger>
<button type="button" class="flex size-7 cursor-pointer items-center justify-center rounded-sm text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-800" aria-label="Status explanation"><acun:icon name="information-circle" size="4" /></button>
</acun:slot:trigger>
<p class="font-medium text-gray-900 dark:text-zinc-100">Nobody was at the address on either attempt</p>
<p class="mt-1">The carrier will try to deliver a third time tomorrow.</p>
<a href="#" class="mt-2 inline-block font-medium text-brand-600 hover:underline dark:text-brand-400">Shipment history</a>
</acun:popover>
</div>| Prop | Values |
|---|---|
class | Added to the content area |
Composing from parts
The button or link inside acun:popover.trigger opens the bubble (aria-expanded and aria-controls are added automatically); the content goes inside acun:popover.content (title). A w-* class changes the default width. Esc and a click outside close the bubble.
<div class="flex flex-wrap items-center gap-6">
<acun:popover>
<acun:popover.trigger>
<acun:button variant="white"><acun:icon name="information-circle" size="4" /> Return policy</acun:button>
</acun:popover.trigger>
<acun:popover.content title="Return window">
Products can be returned within 14 days of delivery. After that, the support agent asks the store manager for approval.
</acun:popover.content>
</acun:popover>
<acun:popover align="end">
<acun:popover.trigger>
<button type="button" class="text-sm font-medium text-brand-600 underline-offset-4 hover:underline dark:text-brand-400">3 orders waiting</button>
</acun:popover.trigger>
<acun:popover.content title="Pending orders" class="w-80">
<ul class="space-y-1.5">
<li>Cumhuriyet Dist., 12th St. No. 4 · recipient not at the address</li>
<li>Atatürk Ave. No. 87 Apt. 3 · delivery at 15:00</li>
<li>Lale St. No. 15 · waiting for address confirmation</li>
</ul>
</acun:popover.content>
</acun:popover>
</div>| Prop | Values |
|---|---|
acun:popover.trigger | Button or link that opens the bubble |
acun:popover.content | title; width via class |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
title | null | Header row |
position | bottom | bottom · top |
align | start | start · end |
popover.content: title | null | Composed usage: the bubble title; width via class (e.g. w-80) |