---
title: "Popover"
description: "Floating popover anchored to a trigger."
section: "Libraries"
group: "UI components"
order: 515
---

## Usage

```tsx
import { Popover, PopoverContent, PopoverTrigger } from "@aeontel/ui";

<Popover>
  <PopoverTrigger asChild>
    <Button variant="ghost">Filters</Button>
  </PopoverTrigger>
  <PopoverContent className="w-72">Filter form.</PopoverContent>
</Popover>;
```

## Exports

### `Popover`

Popover root.

```ts
Popover(props: PopoverPrimitive.Root.Props): JSX.Element
```

### `PopoverTrigger`

Element that opens the popover.

```ts
PopoverTrigger(props: PopoverPrimitive.Trigger.Props): JSX.Element
```

### `PopoverContent`

Floating popover content.

```ts
PopoverContent(props: PopoverPrimitive.Popup.Props & Pick< PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" >): JSX.Element
```

### `PopoverHeader`

Header section of the popover content.

```ts
PopoverHeader(props: React.ComponentProps<"div">): JSX.Element
```

### `PopoverTitle`

Popover title text.

```ts
PopoverTitle(props: PopoverPrimitive.Title.Props): JSX.Element
```

### `PopoverDescription`

Popover description text.

```ts
PopoverDescription(props: PopoverPrimitive.Description.Props): JSX.Element
```