---
title: "Popover"
description: "A floating panel anchored to its trigger, for filters, a quick form or details that do not deserve a dialog. Focus moves in, and Esc or a click outside closes it."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Popover

## Quick form

```tsx
import { Button, Popover, PopoverTrigger, TextField } from '@arbol-ai/ui';

<PopoverTrigger>
  <Button variant="outline">Rename campaign</Button>
  <Popover placement="bottom start">
    {({ close }) => (
      <div className="grid gap-3">
        <TextField defaultValue="Spring check-ups" label="Name" />
        <Button onPress={close} size="sm">
          Save
        </Button>
      </div>
    )}
  </Popover>
</PopoverTrigger>
```

## With an arrow

```tsx
import { Button, Popover, PopoverTrigger } from '@arbol-ai/ui';

<PopoverTrigger>
  <Button variant="ghost">What is a contact rate?</Button>
  <Popover className="w-64 text-sm" showArrow>
    The share of contacts who answered at least once in the period.
  </Popover>
</PopoverTrigger>
```

## Source

The examples above are [`src/components/popover/popover.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/popover/popover.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/overlays/popover/index.mdx