Popover

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

Copy Markdown

RenderlessIntermediate Apr 5, 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.

Features

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'):

vue

<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'):

vue

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

Anatomy

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

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

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