42. Popover API

HTML Popover API

Popover API — нативный браузерный механизм для создания всплывающих элементов: тултипов, дропдаунов, нотификаций, меню. Всё это теперь без JavaScript — только HTML-атрибуты.

До Popover API для каждого попапа нужно было:

• Писать JS для открытия/закрытия
• Управлять z-index и слоями
• Делать ::backdrop вручную
• Обрабатывать закрытие по Escape и клику вне

Popover API решает всё это автоматически.

Поддержка: Chrome 114+, Firefox 125+, Safari 17+

---

Базовый синтаксис

Минимум — два атрибута:

<!-- 1. Кнопка-триггер -->
<button popovertarget="my-popover">Открыть</button>

<!-- 2. Сам попап -->
<div id="my-popover" popover>
  Привет, я попап!
</div>

Никакого JS! Браузер сам:

• Открывает попап по клику
• Закрывает по Escape
• Закрывает при клике вне
• Управляет z-index (через top layer)

---

Атрибут popover

<div popover>…</div>        <!-- авто-режим (popover="auto") -->
<div popover="auto">…</div> <!-- явный авто-режим -->
<div popover="manual">…</div> <!-- ручной режим, не закрывается автоматически -->

Значение	Поведение
auto	Закрывается по Escape и клику снаружи. Только один одновременно.
manual	Закрывается только явным триггером или JS. Несколько сразу.

---

popovertarget и popovertargetaction

<button popovertarget="pop1">Toggle</button>
<button popovertarget="pop1" popovertargetaction="show">Открыть</button>
<button popovertarget="pop1" popovertargetaction="hide">Закрыть</button>

<div id="pop1" popover>…</div>

popovertargetaction	Действие
toggle (по умолчанию)	Переключает открыто/закрыто
show	Только открывает
hide	Только закрывает

---

JavaScript API

const pop = document.getElementById('my-popup');

pop.showPopover();    // открыть
pop.hidePopover();    // закрыть
pop.togglePopover();  // переключить

// Событие
pop.addEventListener('toggle', e => {
  console.log(e.newState); // "open" | "closed"
});

---

Стилизация

/* Стиль попапа в закрытом состоянии (он скрыт) */
[popover] {
  margin: auto;
  padding: 16px;
  border-radius: 8px;
  border: none;
}

/* Фон за popup="auto" */
[popover]::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* Анимация появления через @starting-style */
[popover] {
  transition: opacity 0.2s, scale 0.2s;
  opacity: 1;
  scale: 1;
}

[popover]:popover-open {
  opacity: 1;
  scale: 1;
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    scale: 0.9;
  }
}

Псевдокласс :popover-open — для стилей открытого попапа.

---

Интерактивный пример 1 — базовые поповеры

---

Интерактивный пример 2 — контекстное меню и модальный диалог