Usage

Popover opens a surface next to a trigger button. The surface holds short, interactive content such as a form, a short message, or an action list. The trigger is the default slot and the surface is the content slot.

<script setup lang="ts">
import { Button } from '@astryx-vue/core/Button'
import { Popover } from '@astryx-vue/core/Popover'
</script>

<template>
  <Popover label="Project details">
    <Button label="Details" variant="secondary" />
    <template #content>
      <p>Short content goes here.</p>
    </template>
  </Popover>
</template>

Best practices

Guidance	Practices
Do	Keep popover content focused on a single task or piece of information.
Do	Provide a clear way to close: either by clicking outside or with an explicit close button.
Don't	Nest popovers inside other popovers; it creates confusing focus and navigation.
Don't	Use a popover for content that requires heavy user input; use a Dialog instead.
Don't	Put too much content in a popover; if it needs scrolling, use a Dialog instead.

Examples

Basic

Click the trigger to open the surface. Escape, an outside press, or the close button dismisses it.

Placements

placement sets the side of the trigger and alignment sets its position along that side. The popover flips when there is no room.

Form content

A dialog popover holds interactive controls. Focus moves into it when it opens and returns to the trigger when it closes.

Action list

role none removes dialog semantics for content that already carries its own roles, such as a menu. Focus stays on the trigger.

Accessibility

A popover has to communicate its presence, its current open state, and its content to people who use a screen reader or a keyboard. The component links the trigger to the surface automatically and manages focus as the surface opens and closes, so you only need to supply the accessible name.

• The trigger receives aria-haspopup, aria-expanded, and aria-controls, so assistive technology knows it is a button that opens a surface and can announce whether that surface is currently expanded.
• A dialog surface has role="dialog"; when isModal is set it also has aria-modal="true", and the label serves as its accessible name.
• Focus moves to the first focusable element inside the surface on open, and returns to the trigger when the user presses Escape or closes the surface.
• With isModal set, Tab focus stays inside the surface while it is open.
• The built-in close button is visually hidden until it receives focus, so it appears once the keyboard reaches it.

Layout

The surface is positioned with JavaScript. It recalculates its position when the page scrolls or resizes, and it flips to the other side when the chosen side has no room.