---
type: snippet
tags: ['css', 'ui']
status: release
ctime: 2023-06-13
mtime: 2024-03-22
---

```ts
type Props = {
  popover: 'auto' | 'manual'
  popovertarget: string
  popovertargetaction: 'hide' | 'show' | 'toggle'
}

type State = {
  hasBackdrop: boolean
  isPopoverOpen: boolean
}

type Methods = {
  hidePopover: () => void
  showPopover: () => void
  togglePopover: () => void
}

type Events = {
  beforetoggle: () => void
  toggle: () => void
}
```

---

- https://developer.chrome.com/blog/introducing-popover-api/
- https://developer.mozilla.org/en-US/docs/Web/API/Popover_API