# Popup

> Source: https://design.nanatec.co.ke/components/popup/
> A lightweight anchored popover. Positions floating content relative to an anchor (slotted into `anchor`), with placement, an optional arrow, and click / hover / manual triggers. Flips on the main axis when it would overflow the viewport.

A lightweight anchored popover. Positions floating content relative to an anchor (slotted into `anchor`), with placement, an optional arrow, and click / hover / manual triggers. Flips on the main axis when it would overflow the viewport.

## Preview

```html
<nana-popup placement="bottom-start" arrow>
  <nana-button slot="anchor" variant="secondary">Click me</nana-button>
  <div style="padding:.75rem 1rem">Popup content</div>
</nana-popup>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/popup";
```

## Basic usage

```html
<nana-button>Anchor</nana-button>
```

## Triggers & placement

Use `trigger="click"` (default) or `trigger="hover"`, and set `placement`
(`top`, `bottom-start`, `right`, …).

```html
<nana-popup trigger="hover" placement="top" arrow>
  <nana-button slot="anchor" variant="secondary">Hover me</nana-button>
  <div style="padding:.75rem 1rem">Shown on hover</div>
</nana-popup>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-show` | `CustomEvent` | Fired when the popup opens |
| `nana-hide` | `CustomEvent` | Fired when the popup closes |

## Slots

| Slot | Description |
|---|---|
| `anchor` | The trigger element |
| `(default)` | The floating content |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-popup-bg` | — | Panel background |
| `--nana-popup-radius` | — | Panel corner radius |

## CSS Parts

| Part | Description |
|---|---|
| `popup` | The floating panel |
| `arrow` | The pointing arrow |

## Related components

<ul class="related not-content">
  <li><a href="/components/card/">Card</a></li>
  <li><a href="/components/details/">Details</a></li>
  <li><a href="/components/divider/">Divider</a></li>
  <li><a href="/components/dialog/">Dialog</a></li>
  <li><a href="/components/drawer/">Drawer</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-popup--docs