Popover

Stable v1.0.2

A floating panel anchored to whatever you click or hover, for menus, tooltips, or small forms that don't need a full modal.

Interactive Playground

Combine every prop live — anchor placement, trigger behavior, sizing, and appearance — and copy the resulting code.

Anchor & Trigger

Placement

Bottom

Trigger

Click

Offset (px)

Sizing

Size

Medium (md)

Width Class Override

Match Trigger Width

Appearance

Show Arrow

Trigger Wrapper Class

State

Disabled

Open (v-model)

Live Source Code

<Popover v-model="isOpen">
  <template #trigger>
    <Button label="Open Popover" />
  </template>

  <div class="flex flex-col gap-2 p-4">
    <h4 class="text-sm font-semibold text-main">Playground Panel</h4>
    <p class="text-xs text-muted">Every prop above is live-bound to this instance.</p>
  </div>
</Popover>

Basic Click Trigger

By default, the popover opens on click. We use the Button component as a trigger to ensure theme consistency.

Template

<Popover placement="bottom">
  <template #trigger="{ isOpen }">
    <Button :label="isOpen ? 'Close Options' : 'Click for Options'" />
  </template>

  <div class="flex flex-col gap-3 p-4">
    <h4 class="text-sm font-semibold text-main">Quick Settings</h4>
    <p class="text-xs text-muted">Adjust your layout preferences without leaving the page.</p>
    <div class="mt-2 flex gap-2">
      <Button label="Accept" size="sm" class="flex-1" />
      <Button label="Decline" severity="secondary" size="sm" class="flex-1" />
    </div>
  </div>
</Popover>

Hover Mode

Useful for rich tooltips. Note how we can use the Button component in variant="link" mode to create an info trigger.

Template

<Popover trigger="hover" placement="top" widthClass="w-64">
  <template #trigger>
    <Button label="Hover for Details" icon="lucide:info" variant="link" />
  </template>

  <div class="flex flex-col gap-2 p-3">
    <span class="text-xs font-bold uppercase text-main">Storage Capacity</span>
    <div class="h-2 w-full overflow-hidden rounded-full bg-surface">
      <div class="h-full w-[75%] bg-success"></div>
    </div>
    <span class="text-xs text-muted">75% of TEU limit reached.</span>
  </div>
</Popover>

Interactive Forms

The close method in the scoped slot allows for clean dismissal after form interaction.

Template

<Popover placement="right" widthClass="w-[calc(100vw-2rem)] sm:w-50 md:w-auto">
  <template #trigger>
    <Button label="Invite User" icon="lucide:mail-plus" severity="primary" />
  </template>

  <template #default="{ close }">
    <div class="flex flex-col gap-4 p-5">
      <h4 class="text-sm font-semibold text-main">Invite Team Member</h4>
      <InputText
        label="Agent Email"
        type="email"
        iconStart="lucide:mail"
        v-model="userEmail"
      />
      <div class="mt-2 flex justify-end gap-2">
        <Button @click="close" label="Cancel" variant="text" severity="secondary" size="sm" />
        <Button @click="close" label="Send Invite" size="sm" />
      </div>
    </div>
  </template>
</Popover>

API Reference

Props

Name	Type / Signature	Default	Description
modelValue	boolean	false	Open state of the popover, bound via v-model.
placement	Placement (floating-ui)	"bottom"	Preferred side/alignment for the floating panel, e.g. "bottom-start".
trigger	"click" \| "hover"	"click"	Interaction that opens the popover.
offset	number	12	Pixel gap between the trigger and the floating panel.
disabled	boolean	false	Prevents the popover from opening.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Preset panel width (xs: w-56 ... xl: w-32rem). Ignored when widthClass is set or matchWidth is true.
widthClass	string	undefined	Explicit Tailwind width utility class for the panel, overriding size (ignored when matchWidth is true).
showArrow	boolean	true	Renders a small pointer arrow connecting the panel to the trigger.
matchWidth	boolean	false	Matches the floating panel's width to the trigger element.
triggerClass	string	"inline-block"	Classes applied to the trigger wrapper element.

Slots

Slot Name	Exposed Bindings	Description
trigger	{ isOpen: boolean }	The element that opens/closes the popover on interaction.
default	{ close: () => void }	Content rendered inside the floating panel.