Popover

Displays floating rich content anchored to a specific trigger element, rendering on top of all other page elements.

Usage

import { VPopover, VButton, VIcon } from '@vonage/vivid-api-vue';

<script setup lang="ts">
import { VPopover, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VPopover aria-label="My Popover">
    <template #anchor>
      <VButton label="Open popover" appearance="filled" icon-trailing>
        <template #icon><VIcon name="open-solid" /></template>
      </VButton>
    </template>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </VPopover>
</template>

import { registerPopover } from '@vonage/vivid-api';
import { registerButton } from '@vonage/vivid-api';

registerPopover('your-prefix');
registerButton('your-prefix');

<script type="module">
  import { registerPopover } from '@vonage/vivid-api';
  import { registerButton } from '@vonage/vivid-api';
  import { registerIcon } from '@vonage/vivid-api';

    registerPopover('your-prefix');
    registerButton('your-prefix');
    registerIcon('your-prefix');

</script>

<your-prefix-popover aria-label="My Popover">
  <your-prefix-button slot="anchor" label="Open popover" appearance="filled" icon-trailing>
    <your-prefix-icon slot="icon" name="open-solid"></your-prefix-icon>
  </your-prefix-button>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</your-prefix-popover>

Anchor

It is recommended use the anchor slot to set the anchor.

The anchor attribute can be used to pass the anchor element.

<script setup lang="ts">
import { useTemplateRef, onMounted } from 'vue';
import { VPopover, VButton, VIcon } from '@vonage/vivid-api-vue';

const button = useTemplateRef<InstanceType<typeof VButton>>('button');
const popover = useTemplateRef<InstanceType<typeof VPopover>>('popover');
onMounted(() => {
if (popover.value && button.value) {
popover.value.element.anchor = button.value.element;
}
});

</script>

<template>
  <div>
    <VButton ref="button" label="Open popover" appearance="filled" icon-trailing>
      <template #icon><VIcon name="open-solid" /></template>
    </VButton>
    <VPopover ref="popover" aria-label="My Popover">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </VPopover>
  </div>
</template>

<vwc-button id="button" label="Open popover" appearance="filled" icon-trailing>
  <vwc-icon slot="icon" name="open-solid"></vwc-icon>
</vwc-button>
<vwc-popover id="popover" aria-label="My Popover">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</vwc-popover>

<script>const button = document.getElementById('button'); const popover = document.getElementById('popover'); popover.anchor = button;</script>

Open

The open attribute controls the open state of the Popover.

<script setup lang="ts">
import { VPopover, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VPopover open aria-label="My Popover">
    <template #anchor>
      <VButton label="Open popover" appearance="filled" icon-trailing>
        <template #icon><VIcon name="open-solid" /></template>
      </VButton>
    </template>
    <div>I'm opened by default, that's really cool!</div>
  </VPopover>
</template>

<vwc-popover open aria-label="My Popover">
  <vwc-button label="Open popover" appearance="filled" slot="anchor" icon-trailing>
    <vwc-icon slot="icon" name="open-solid"></vwc-icon>
  </vwc-button>
  <div>I'm opened by default, that's really cool!</div>
</vwc-popover>

Manual

The manual attribute sets the Popover to manual mode, disabling light-dismiss (clicking outside) and displaying a close button.

<script setup lang="ts">
import { VPopover, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VPopover manual aria-label="My Popover" dismiss-button-aria-label="Close the Popover">
    <template #anchor>
      <VButton label="Open popover" appearance="filled" icon-trailing>
        <template #icon><VIcon name="open-solid" /></template>
      </VButton>
    </template>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </VPopover>
</template>

<vwc-popover manual aria-label="My Popover" dismiss-button-aria-label="Close the Popover">
  <vwc-button label="Open popover" appearance="filled" slot="anchor" icon-trailing>
    <vwc-icon slot="icon" name="open-solid"></vwc-icon>
  </vwc-button>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</vwc-popover>

Slots

Anchor Slot

Place the anchor element inside the anchor slot of the Popover.

<script setup lang="ts">
import { VPopover, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VPopover aria-label="My Popover">
    <template #anchor>
      <VButton label="Open popover" appearance="filled" icon-trailing>
        <template #icon><VIcon name="open-solid" /></template>
      </VButton>
    </template>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </VPopover>
</template>

<vwc-popover aria-label="My Popover">
  <vwc-button label="Open popover" appearance="filled" slot="anchor" icon-trailing>
    <vwc-icon slot="icon" name="open-solid"></vwc-icon>
  </vwc-button>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</vwc-popover>

Default Slot

Use default slot to add rich content to the Popover.

<script setup lang="ts">
import { VPopover, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VPopover aria-label="My Popover">
    <template #anchor>
      <VButton label="Open popover" appearance="filled" icon-trailing>
        <template #icon><VIcon name="open-solid" /></template>
      </VButton>
    </template>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </VPopover>
</template>

<vwc-popover aria-label="My Popover">
  <vwc-button label="Open popover" appearance="filled" slot="anchor" icon-trailing>
    <vwc-icon slot="icon" name="open-solid"></vwc-icon>
  </vwc-button>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</vwc-popover>

Use footer slot to add extra content to the bottom of the Popover.

<script setup lang="ts">
import { VPopover, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VPopover aria-label="My Popover" placement="bottom-start">
    <template #anchor>
      <VButton label="Open popover" appearance="filled" icon-trailing>
        <template #icon><VIcon name="open-solid" /></template>
      </VButton>
    </template>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <template #footer>
      <VButton label="Extra footer action" appearance="filled" connotation="cta">
        <template #icon><VIcon name="link-solid" /></template>
      </VButton>
    </template>
  </VPopover>
</template>

<vwc-popover aria-label="My Popover" placement="bottom-start">
  <vwc-button label="Open popover" appearance="filled" slot="anchor" icon-trailing>
    <vwc-icon slot="icon" name="open-solid"></vwc-icon>
  </vwc-button>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <vwc-button label="Extra footer action" appearance="filled" connotation="cta" slot="footer">
    <vwc-icon slot="icon" name="link-solid"></vwc-icon>
  </vwc-button>
</vwc-popover>

CSS Variables

Padding

Use the --popover-padding variable to set the padding around the Popover’s content.

Default: 24px

<script setup lang="ts">
import { VPopover, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VPopover class="popover" aria-label="My Popover">
    <template #anchor>
      <VButton label="Open popover" appearance="filled" icon-trailing>
        <template #icon><VIcon name="open-solid" /></template>
      </VButton>
    </template>
    <div>This popover has custom padding.</div>
  </VPopover>
</template>

<style>
.popover {
  --popover-padding: 6px;
}
</style>

<vwc-popover aria-label="My Popover">
  <vwc-button label="Open popover" appearance="filled" slot="anchor" icon-trailing>
    <vwc-icon slot="icon" name="open-solid"></vwc-icon>
  </vwc-button>
  <div>This popover has custom padding.</div>
</vwc-popover>

<style>
  vwc-popover {
    --popover-padding: 6px;
  }
</style>

Gap

Use the --popover-gap variable to set the size of the gap between Popover’s content and footer.

Default: 24px

<script setup lang="ts">
import { VPopover, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VPopover class="popover" aria-label="My Popover" placement="bottom-start">
    <template #anchor>
      <VButton label="Open popover" appearance="filled" icon-trailing>
        <template #icon><VIcon name="open-solid" /></template>
      </VButton>
    </template>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <template #footer>
      <VButton label="Extra footer action" appearance="filled" connotation="cta">
        <template #icon><VIcon name="link-solid" /></template>
      </VButton>
    </template>
  </VPopover>
</template>

<style>
.popover {
  --popover-gap: 12px;
}
</style>

<vwc-popover aria-label="My Popover" placement="bottom-start">
  <vwc-button label="Open popover" appearance="filled" slot="anchor" icon-trailing>
    <vwc-icon slot="icon" name="open-solid"></vwc-icon>
  </vwc-button>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <vwc-button label="Extra footer action" appearance="filled" connotation="cta" slot="footer">
    <vwc-icon slot="icon" name="link-solid"></vwc-icon>
  </vwc-button>
</vwc-popover>

<style>
  vwc-popover {
    --popover-gap: 12px;
  }
</style>

Backdrop

Use the --popover-backdrop-bg variable to set the background color of the Popover’s backdrop.

Default: transparent

<script setup lang="ts">
import { VPopover, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VPopover class="popover" aria-label="My Popover">
    <template #anchor>
      <VButton label="Open popover" appearance="filled" icon-trailing>
        <template #icon><VIcon name="open-solid" /></template>
      </VButton>
    </template>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </VPopover>
</template>

<style>
.popover {
  --popover-backdrop-bg: rgba(135, 30, 255, 0.25);
}
</style>

<vwc-popover aria-label="My Popover">
  <vwc-button label="Open popover" appearance="filled" slot="anchor" icon-trailing>
    <vwc-icon slot="icon" name="open-solid"></vwc-icon>
  </vwc-button>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</vwc-popover>

<style>
  vwc-popover {
    --popover-backdrop-bg: rgba(135, 30, 255, 0.25);
  }
</style>

API Reference

Property	Type	Description
alternate	`boolean`	Sets the color-scheme to alternate (dark/light)
anchor	`HTMLElement`	Sets the Popover's anchor element. Prefer using the [`anchor` slot](/components/popover/code/#anchor-slot) if possible.
arrow	`boolean`	Adds a small triangle to indicate the trigger element.
dismissButtonAriaLabel	`string`	Overrides the default "Close" aria-label of Dismiss button when manual mode is enabled.
layout	`'condensed' \| 'default'`	Can be used to enable a condensed layout with smaller paddings and gaps.
manual	`boolean`	Sets the Popover to manual mode, disabling light-dismiss (clicking outside) and displaying a close button.
offset	`number`	Sets the offset between popover and the anchor element.
open	`boolean`	Sets the open state of the Popover
placement	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-end' \| 'left-start' \| 'right-end' \| 'right-start'`	Controls the position of the Popover, relative to its anchor element.

Property	Type	Description
alternate	`boolean`	Sets the color-scheme to alternate (dark/light)
anchor (property only)	`HTMLElement`	Sets the Popover's anchor element. Prefer using the [`anchor` slot](/components/popover/code/#anchor-slot) if possible.
arrow	`boolean`	Adds a small triangle to indicate the trigger element.
dismiss-button-aria-label	`string`	Overrides the default "Close" aria-label of Dismiss button when manual mode is enabled.
layout	`'condensed' \| 'default'`	Can be used to enable a condensed layout with smaller paddings and gaps.
manual	`boolean`	Sets the Popover to manual mode, disabling light-dismiss (clicking outside) and displaying a close button.
offset	`number`	Sets the offset between popover and the anchor element.
open	`boolean`	Sets the open state of the Popover
placement	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-end' \| 'left-start' \| 'right-end' \| 'right-start'`	Controls the position of the Popover, relative to its anchor element.

Name	Description
anchor	Slot for the trigger element.
default	Default slot for the popover content.
footer	Use the footer slot in order to add action buttons or other contents to the bottom of the dialog.

Name	Description
anchor	Slot for the trigger element.
default	Default slot for the popover content.
footer	Use the footer slot in order to add action buttons or other contents to the bottom of the dialog.

Name	Type	Description
close	`CustomEvent`	Fired when the popover closes.
open	`CustomEvent`	Fired when the popover opens.

Name	Type	Description
close	`CustomEvent`	Fired when the popover closes.
open	`CustomEvent`	Fired when the popover opens.

Name	Returns	Description
hide	`void`
show	`Promise<void>`
toggle	`void`
updatePosition	`Promise<void>`	Updates the position of the popover

Popover

Usage

Anchor

Open

Manual

Slots

Anchor Slot

Default Slot

Footer Slot

CSS Variables

Padding

Gap

Backdrop

API Reference

Properties

Slots

Events

Methods