Popover Component

Popover is a floating container that appears next to its activator element above the main document flow.

No event listeners are attached to the activating element to give the user full control over the way the popover is triggered.

Based on:

• usePopover

Demo

Code

<template>
  <div class="d-demo">
    <Popover direction="right" align="center" v-slot="{ attrs, toggle, close }">
      <button @click="toggle" v-bind="attrs" class="d-btn">Toggle</button>

      <PopoverDialog class="d-popover d-popover--h">
        <div>Any HTML content &#x1F61C;</div>
        <button @click="close()" class="d-btn">Close</button>
      </PopoverDialog>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import { Popover, PopoverDialog } from "../../../src/main";
</script>

Popover

The root component.

Properties

Property	Required	Description	Type	Default
id	false	The ID of the popover dialog.	string	Auto-generated
activatorId	false	The ID of the activator element.	string	Auto-generated
direction	false	The direction of the popover.	'up' | 'down' | 'left' | 'right'	'down'
align	false	The alignment of the popover.	'top' | 'bottom' | 'left' | 'right' | 'center' | 'stretch'	'left'
position	false	CSS position of the popover dialog.	'fixed' | 'absolute'	'fixed'
closeOnOutsideClick	false	Close the popover on an click outside of the dialog.	boolean	true
closeOnInsideClick	false	Close the popover on an click inside of the dialog.	boolean	false
role	false	The ARIA role of the popover	'dialog' | 'listbox' | 'menu' | 'tree' | 'grid'	'dialog'

Slots

default

The default slot is used to provide an activating element and a PopoverDialog. The slot passes the following properties:

Property	Description	Type
attrs	Required attributes that must be binded to the activator	object
isOpen	The status of the popover	Ref<boolean>
toggle	Toggle the popover	() => void
open	Open the popover and place focus on it	() => void
close	Close the popover and return focus to the activator	() => void

<Popover v-slot="{ attrs, toggle, close }">
  <button @click="toggle" v-bind="attrs">Toggle</button>

  <PopoverDialog>
    <button @click="close()" >Close</button>
  </PopoverDialog>
</Popover>

ARIA roles and attributes

The following attributes are managed for the activator:

• aria-controls
• aria-haspopup
• aria-expanded

PopoverDialog

Keyboard interactions

• Escape - Closes the popover and returns focus to the activating element.

ARIA roles and attributes

The popover container has the role provided in the popover properties and automatically manages the following attributes:

• aria-labelledby