Popover

A headless component for creating popovers and tooltips using modern CSS anchor positioning.

Usage

The Popover component leverages the CSS Anchor Positioning API to create popovers, tooltips, and dropdown menus without JavaScript-based positioning. It provides v-model support for open/closed state management.

<script setup lang="ts">
  import { Popover } from '@vuetify/v0'
</script>

<template>
  <div class="flex justify-center">
    <Popover.Root>
      <Popover.Activator class="px-4 py-2 bg-primary text-on-primary rounded-md text-sm font-medium">
        Open Popover
      </Popover.Activator>

      <Popover.Content class="p-4 rounded-lg bg-surface border border-divider shadow-lg max-w-xs">
        <p class="text-sm text-on-surface">
          This is a popover using CSS anchor positioning.
        </p>
      </Popover.Content>
    </Popover.Root>
  </div>
</template>

Anatomy

<script setup lang="ts">
  import { Popover } from '@vuetify/v0'
</script>

<template>
  <Popover.Root>
    <Popover.Activator />

    <Popover.Content />
  </Popover.Root>
</template>

Recipes

Positioning

Use position-area on Popover.Content to control where the popover appears relative to its anchor. Accepts any CSS position-area↗︎ value (default: 'bottom'):

<template>
  <Popover.Content position-area="top">
    <!-- Appears above the anchor -->
  </Popover.Content>

  <Popover.Content position-area="end">
    <!-- Appears to the right of the anchor -->
  </Popover.Content>
</template>

Use position-try to specify fallback positions when the preferred position doesn’t fit in the viewport (default: 'most-width bottom'):

<template>
  <!-- Try bottom first; fall back to most available width -->
  <Popover.Content position-area="bottom" position-try="most-width bottom">
    Tooltip content
  </Popover.Content>
</template>

Accessibility

Popover uses the native Popover API — the popover attribute on the content plus popovertarget on the trigger — so opening, closing, light-dismiss (clicking outside), and Escape-to-close are all handled by the browser. Placement uses CSS Anchor Positioning.

ARIA Attributes

Popover.Activator renders a <button> by default and toggles the popover through the native popovertarget attribute. Popover.Content is unstyled and carries no semantic role of its own — assign one that matches what the popover contains (for example menu, listbox, or tooltip).

Keyboard Navigation

FAQ