# Popover

Opens a non-modal popup anchored to a trigger.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Popover.tsx)

## Overview

A popover is a non-modal dialog anchored to a trigger and opened on click.

Use it for interactive or longer content. Use `Tooltip` for a short hint on hover.

## Examples

### Basic

```tsx
import { Button, Popover, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Popover.Root>
      <Popover.Trigger render={<Button variant="secondary" />}>Network fee</Popover.Trigger>
      <Popover.Popup>
        <Popover.Title>Network fee</Popover.Title>
        <Popover.Description>Paid in the token you send.</Popover.Description>
        <div {...styles.actions()}>
          <Popover.Close render={<Button size="small" variant="secondary" />}>Got it</Popover.Close>
        </div>
      </Popover.Popup>
    </Popover.Root>
  )
}

namespace styles {
  export const actions = style({ marginTop: '4' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Popover/Basic.tsx)

### Side

Set `side` on `Popover.Popup` to `top`, `right`, `bottom`, or `left`. It defaults to `bottom`. Add `Popover.Arrow` to point toward the trigger.

```tsx
import { Button, Popover } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Popover.Root>
      <Popover.Trigger render={<Button variant="secondary" />}>With arrow</Popover.Trigger>
      <Popover.Popup side="right">
        <Popover.Arrow />
        <Popover.Title>Estimated arrival</Popover.Title>
        <Popover.Description>About one minute.</Popover.Description>
      </Popover.Popup>
    </Popover.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Popover/Side.tsx)

## Guidelines

TODO: Write guidelines for Popover.