Справочник HTML & CSS

popover

Превращает элемент во всплывающий слой поверх страницы — без JavaScript.

Синтаксис

<button popovertarget="tip">?</button>
<div id="tip" popover>…</div>

Параметры

Параметр	Тип	Описание
popover	auto \| manual \| hint	`auto` закрывается кликом снаружи и клавишей Esc, `manual` — только явно.
popovertarget	id	У кнопки: какой элемент открывать.
popovertargetaction	toggle \| show \| hide	Необязательный. Что делает кнопка.

Примеры

Подсказка по кнопке:

<button popovertarget="tip">What is a flat white?</button>
 
<div id="tip" popover>
  <p>Espresso with a thin layer of velvety milk.</p>
</div>

Своё оформление и кнопка закрытия:

<style>
  [popover] { border: none; border-radius: 10px; padding: 16px; box-shadow: 0 4px 20px rgb(0 0 0 / 0.3); }
</style>
 
<button popovertarget="menu">Open menu</button>
<div id="menu" popover>
  <p>Espresso · Latte · Mocha</p>
  <button popovertarget="menu" popovertargetaction="hide">Close</button>
</div>

Примечания

Всплывающий элемент показывается в верхнем слое — над всеми остальными, независимо от z-index. По умолчанию он стоит по центру экрана; привязать его к кнопке можно через CSS anchor positioning. Поддерживается всеми современными браузерами с 2024 года.

См. также

<dialog> — Диалоговое окно; модальное открывается методом `showModal()` и блокирует остальную страницу.
<details>, <summary> — Раскрывающийся блок без JavaScript: `<summary>` — видимый заголовок, остальное скрыто до клика.
<button> — Кнопка: отправляет форму или запускает действие.
position-anchor — Выбирает якорь по умолчанию для элемента с `position: absolute` или `fixed`; от него затем считают `position-area` и `anchor()`.

Вопросы и ответы по теме

В учебнике

Раскрывающиеся блоки и диалоги — Тег details и summary, аккордеон, модальное окно dialog, закрытие через form method=dialog и всплывающие блоки popover.

Спасибо, что читаете!