Popover

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

Copy Page as Markdown

RenderlessIntermediate100% coverageJan 27, 2026

Browser Support: CSS Anchor Positioning

Chrome 125+ Edge 125+ Firefox 147+ (beta) Safari —

The component works in all browsers, but automatic anchor positioning requires CSS Anchor Positioning support. In unsupported browsers, you'll need to position the popover manually or use [Floating UI](https://floating-ui.com).

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.

This is a popover using CSS anchor positioning.

<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>