Components

Popover

A floating panel anchored to a trigger element.

A non-modal floating panel positioned relative to a trigger. Use it for tooltips with rich content, pickers, or contextual forms. Unlike Dialog, it doesn't trap focus.

Anatomy

#trigger: Element that opens the popover.
#content: Floating panel content.

Usage

Examples

Positioned to the top

Use side and align to control where the panel appears relative to the trigger.

<template>
  <Popover side="top" align="center">
    <template #trigger="{ toggle }">
      <button @click="() => toggle()">Info</button>
    </template>
    <template #content>
      <p>Appears above the button.</p>
    </template>
  </Popover>
</template>

With a close button inside

Use the content slot's close function for actions inside the panel.

<template>
  <Popover>
    <template #trigger="{ toggle }">
      <button @click="() => toggle()">Filters</button>
    </template>

    <template #content="{ close }">
      <div class="popover-panel">
        <h3>Filter options</h3>
        <!-- filter controls -->
        <button @click="() => close()">Apply</button>
      </div>
    </template>
  </Popover>
</template>

Enable teleport

By default the popover stays in the DOM tree next to its trigger. Pass teleport="body" to render the panel under <body>.

<template>
  <Popover teleport="body">
    <template #trigger="{ toggle }">
      <button @click="() => toggle()">Open</button>
    </template>
    <template #content>Content in body.</template>
  </Popover>
</template>

API Reference

Props

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Preferred side to position the popover.
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment relative to the trigger.
`sideOffset`	`number`	`6`	Gap in px between trigger and panel.
`teleport`	`string \| false`	`false`	Teleport target.
`transition`	`string \| false`	`"akaza-popover"`	Named Vue transition.
`ui`	`PopoverUi`	—	CSS class overrides.

Slots

Slot	Scoped props	Description
`trigger`	`{ isOpen, open, close, toggle, triggerProps }`	Element that opens the popover.
`content`	`{ close }`	The floating panel content.

Exposed methods

Method	Signature	Description
`open`	`(reason?, event?) => void`	Opens the popover.
`close`	`(reason?, event?) => void`	Closes the popover.
`toggle`	`(reason?, event?) => void`	Toggles the popover.

Emits

Event	Payload	Description
`open-change`	`[open: boolean, details]`	Fired when the open state changes.

UI Options

Key	Description
`root`	Trigger wrapper/root.
`content`	The floating panel element.

Styling Hooks

UI key	CSS class	Data attrs
`root`	`akaza-popover-root`	`data-akaza-state`
`content`	`akaza-popover-content`	`data-akaza-state`, `data-akaza-side`, `data-akaza-align`

Overlay Provider

Programmatic overlay mounting with useOverlay.

Progress

Displays a value indicating completion of a task.