---
title: Popover
description: Render anchored floating content
type: reference
summary: Compose Popover, PopoverTrigger, and PopoverContent outside MDX.
url: /docs/components/popover
source: apps/template/content/docs/components/popover.mdx
related:
  - /docs/components
  - /docs/components/tooltip
---

# Popover

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@vercel/geistdocs/components/popover";

<div className="not-prose my-6 flex min-h-32 items-center justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <Popover>
    <PopoverTrigger className="h-8 rounded-md border border-gray-400 bg-background-100 px-3">
      Open popover
    </PopoverTrigger>
    <PopoverContent>Additional context for this setting.</PopoverContent>
  </Popover>
</div>

```tsx
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@vercel/geistdocs/components/popover";
```

Use a tooltip for short contextual labels and a popover for interactive or structured content.