# Native popover

Host: No library. Path: transitions. Preset: `scale-fade`.

Light dismissed by the browser. The exit plays while the element is still in the top layer, which is the part a naive implementation gets wrong.

The page this file mirrors mounts the component twice, once with the attribute and once without, so the only difference between the two is the library.

Upstream documentation: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

The same component in other hosts: [Radix UI](/radix/popover.md), [Base UI](/base-ui/popover.md).

## Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

```text
button
div  data-motion="scale-fade"
```

## How the match works

| Step | Value |
| --- | --- |
| host writes | `:popover-open, and the top layer` |
| easeful matches | `[data-motion~="scale-fade"][popover]:not(:popover-open)` |
| what runs | `transition: opacity, scale, display, overlay` |
| you write | `<div popover data-motion="scale-fade">` |

## Every value that works here

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

| Value | Link |
| --- | --- |
| `scale-fade` | the default |
| `fade` | [fade](/native/popover#motion=fade) |
| `slide-up` | [slide-up](/native/popover#motion=slide-up) |
| `fade slide-up` | [fade slide-up](/native/popover#motion=fade%20slide-up) |
| `scale-fade slide-up` | [scale-fade slide-up](/native/popover#motion=scale-fade%20slide-up) |

## Source

`apps/docs/components/demos/native/popover.tsx`

```tsx
"use client"

import { useId } from "react"
import type { DemoProps } from "@/components/demos/props"

export function NativePopover({ motion }: DemoProps) {
  const id = useId()

  return (
    <>
      <button type="button" className="btn" popoverTarget={id}>
        Open popover
      </button>
      <div id={id} popover="auto" className="modal" data-motion={motion}>
        <p className="panel__title">Light dismissed by the browser</p>
        <p className="panel__body">
          Click outside or press Escape. The exit plays while the element is still in the top
          layer, which is the part a naive implementation gets wrong.
        </p>
        <div className="modal__actions">
          <button
            type="button"
            className="btn btn--primary"
            popoverTarget={id}
            popoverTargetAction="hide"
          >
            Close
          </button>
        </div>
      </div>
    </>
  )
}
```