Popover

#Basic usage

popover/basic.vue

<script setup lang="ts">
import { x } from "@bysages/icons";
import { Icon, Popover } from "@bysages/vue";
</script>

<template>
  <Popover.Root>
    <Popover.Trigger>Notes</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Content>
        <Popover.CloseTrigger>
          <Icon :glyph="x" />
        </Popover.CloseTrigger>
        <Popover.Title>Reading notes</Popover.Title>
        <Popover.Description>
          Marginalia stay on the paper: this vessel pins to its trigger and dissolves in on
          elevation.
        </Popover.Description>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</template>

#Props

#Anchor

A styled part — no props of its own; it takes the anatomy's shared styling.

#ArrowTip

A styled part — no props of its own; it takes the anatomy's shared styling.

#Arrow

A styled part — no props of its own; it takes the anatomy's shared styling.

#CloseTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Description

A styled part — no props of its own; it takes the anatomy's shared styling.

#Indicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`autoFocus`	`boolean`	`true`	Whether to automatically set focus on the first focusable content within the popover when opened.
`closeOnEscape`	`boolean`	`true`	Whether to close the popover when the escape key is pressed.
`closeOnInteractOutside`	`boolean`	`true`	Whether to close the popover when the user clicks outside of the popover.
`defaultOpen`	`boolean`		The initial open state of the popover when rendered. Use when you don't need to control the open state of the popover.
`defaultTriggerValue`	`string \| null`		The initial trigger value when rendered. Use when you don't need to control the trigger value.
`finalFocusEl`	`() => HTMLElement \| null`		Element to receive focus when the popover is closed
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ anchor: string; trigger: string; content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }>`		The ids of the elements in the popover. Useful for composition.
`initialFocusEl`	`() => HTMLElement \| null`		The element to focus on when the popover is opened.
`modal`	`boolean`	`false`	Whether the popover should be modal. When set to `true`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover
`open`	`boolean`		The controlled open state of the popover
`persistentElements`	`(() => Element \| null)[]`		Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
`portalled`	`boolean`	`true`	Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content.
`positioning`	`popover.PositioningOptions`		The user provided options used to position the popover content
`restoreFocus`	`boolean`	`true`	Whether to restore focus to the element that had focus before the popover was opened
`translations`	`popover.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states
`triggerValue`	`string \| null`		The value of the trigger that currently open the popover

#Title

A styled part — no props of its own; it takes the anatomy's shared styling.

#Trigger

Prop	Type	Default	Description
`value`	`string \| undefined`		The value that identifies this specific trigger