---
title: Popover
description: A floating panel anchored to a trigger, flipping when short on room.
---
import Source from './_generated/popover.mdx';

A floating panel anchored to a trigger. Opening reveals the panel below the trigger — flipping above when there isn't room below — and it dismisses on an outside tap or Escape while trapping focus. Behaviour is composed from the shared overlay primitive and the same anchored-position engine the Select reuses, so there is no bespoke positioning. iOS renders an opaque surface-container card with a soft shadow; Android renders an MD3 menu-surface with elevation.

<DemoFrame component="popover" height={520} />

## Installation

```bash
npx touchcn add popover
```

## Usage

<CodeGroup>

```html Angular
<tcn-popover>
  <span popover-trigger class="tcn-btn tcn-btn-secondary ...">Options</span>
  <div class="flex flex-col">
    <button type="button">Share</button>
    <button type="button">Rename</button>
  </div>
</tcn-popover>
```

```tsx React
import { TcnPopover } from '@/components/ui/popover';

<TcnPopover trigger={<span className="tcn-btn tcn-btn-secondary ...">Options</span>}>
  <div className="flex flex-col">
    <button type="button">Share</button>
    <button type="button">Rename</button>
  </div>
</TcnPopover>
```

```vue Vue
<script setup lang="ts">
import { TcnPopover } from '@/components/ui/popover';
</script>

<template>
  <TcnPopover>
    <template #trigger>
      <span class="tcn-btn tcn-btn-secondary ...">Options</span>
    </template>
    <div class="flex flex-col">
      <button type="button">Share</button>
      <button type="button">Rename</button>
    </div>
  </TcnPopover>
</template>
```

</CodeGroup>

Placement is limited to below/above with an automatic flip — no full placement matrix. On compact widths a bottom [Action Sheet](/docs/components/action-sheet) is often the better pattern than a popover; reach for that when the panel is large or the viewport is narrow.

## Props

| Prop                   | Type        | Default | Description                                            |
| ---------------------- | ----------- | ------- | ----------------------------------------------------- |
| `open`                 | `boolean`   | `false` | Open state (two-way in Angular; controlled in React). |
| `disabled`             | `boolean`   | `false` | Disable the trigger.                                  |
| `trigger` (React)      | `ReactNode` | —       | Content rendered inside the trigger button.           |
| `[popover-trigger]` (Angular) | slot | —       | Content projected into the trigger button.            |

<Source />