Popover is a container component that can overlay other components on page.
import Popover from 'primevue/popover';
Popover is accessed via its ref and visibility is controlled using toggle, show and hide functions with an event of the target.
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
<Popover ref="op">
<div class="flex flex-col gap-4 w-[25rem]">
<div>
<span class="font-medium block mb-2">Share this document</span>
<InputGroup>
<InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
<InputGroupAddon>
<i class="pi pi-copy"></i>
</InputGroupAddon>
</InputGroup>
</div>
<div>
<span class="font-medium block mb-2">Invite Member</span>
<InputGroup>
<InputText disabled />
<Button label="Invite" icon="pi pi-users"></Button>
</InputGroup>
</div>
<div>
<span class="font-medium block mb-2">Team Members</span>
<ul class="list-none p-0 m-0 flex flex-col gap-4">
<li v-for="member in members" :key="member.name" class="flex items-center gap-2">
<img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
<div>
<span class="font-medium">{{ member.name }}</span>
<div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
</div>
<div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
<span>{{ member.role }}</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
</ul>
</div>
</div>
</Popover>
An example that displays a DataTable inside a popup to select an item.
<Toast />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
<div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
<div class="relative">
<img :src="`/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" class="w-16 shadow-sm" class="w-full sm:w-80" />
</div>
<div class="flex items-center justify-between mt-4 mb-2">
<span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
<span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
</div>
<span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
</div>
<Popover ref="op" appendTo="body">
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
<Column field="name" header="Name" sortable style="width: 50%"></Column>
<Column header="Image" style="width: 20%">
<template #body="slotProps">
<img :src="`/images/product/${selectedProduct.image}`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
</template>
</Column>
<Column field="price" header="Price" sortable style="width: 30%">
<template #body="slotProps">
$ {{ slotProps.data.price }}
</template>
</Column>
</DataTable>
</Popover>
Popover component uses dialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition aria-modal is added since focus is kept within the popup.
Popover adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined.
When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup.
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element within the popup. |
| shift + tab | Moves focus to the previous the focusable element within the popup. |
| escape | Closes the popup and moves focus to the trigger. |