Popover

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

Placement

The placement attribute controls the position of the Popover relative to its anchor element. See the API Reference for all possible values.

The Popover will attempt to position itself where the placement attribute dictates (or the default of bottom if not set). If it is unable to do so, because of lack of available space on the screen, it will flip the Popover to the opposite side.

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

<template>
  <VPopover placement="bottom-end" 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 placement="bottom-end" 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>

Layout

The layout attribute allows you to enable a condensed layout with smaller paddings and gaps.

If you need to set custom paddings and gaps, use CSS variables.

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

<template>
  <VPopover layout="condensed" 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 layout="condensed" 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>

Arrow

The arrow attribute adds a small triangle to indicate the trigger element.

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

<template>
  <VPopover arrow 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 arrow 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>

Alternate

The alternate attribute changes the Popover’s color scheme to the opposite of the currently select one (e.g. from light to dark).

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

<template>
  <VPopover alternate 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 alternate 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>

Offset

Use the offset attribute to customize the gap (in px) between the Popover and the trigger element.

Type: number | null
Default: 8

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

<template>
  <VPopover offset="12" 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 offset="12" 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>