Долгое время создание всплывающих окон, тултипов и выпадающих меню требовало подключения сторонних библиотек на JavaScript (таких как Popper.js) или написания сложных скриптов для управления состоянием, фокусом (z-index) и закрытием по клику вне элемента. Ситуация полностью изменилась с появлением в стандарте HTML атрибута popover (Popover API).
Что такое атрибут popover?
Атрибут popover — это нативный встроенный механизм браузера, который позволяет любому HTML-элементу отображаться поверх всех остальных слоев страницы (в так называемом «верхнем слое» или Top Layer), автоматически управляя логикой скрытия и показа, без единой строчки JavaScript.
Как использовать Popover API
Создание бейзового всплывающего окна теперь требует всего лишь добавления двух атрибутов к кнопке-триггеру и самому скрытому блоку:
|
1 2 3 4 5 6 7 8 |
<!-- 1. Кнопка, управляющая поповером (связь по ID) --> <button popovertarget="my-tooltip">Показать информацию</button> <!-- 2. Сам скрытый блок с уникальным ID и атрибутом popover --> <div id="my-tooltip" popover> <h3>Нативный Popover</h3> <p>Этот блок открывается и закрывается без JS. Браузер сам заботится о z-index и закрытии по клику на фон (Light dismiss).</p> </div> |
Атрибуты управления
Popover API предлагает декларативный контроль над поведением всплывающих окон через HTML-атрибуты:
popover: Может принимать значенияauto(закрывается при клике мимо, дефолт) илиmanual(не закрывается при клике мимо, нужно явно закрывать крестиком).popovertarget="id": Указывает ID поповера, который нужно открыть или переключить (toggle).popovertargetaction: Может бытьtoggle(дефолт),showилиhide. Это позволяет создавать раздельные кнопки для открытия и закрытия.
Стилизация через CSS
Браузер по умолчанию центрирует popover на экране с черной рамкой. Однако вы можете полностью кастомизировать его, включая фон под ним с помощью псевдоэлемента ::backdrop:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* Стилизация самого всплывающего окна */ [popover] { padding: 2rem; border: none; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } /* Стилизация темного фона позади поповера */ [popover]::backdrop { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); /* эффект размытия */ } |
Заметка по доступности (A11y): Нативный popover автоматически управляет фокусом клавиатуры и поддерживает нажатие клавиши
Escapeдля закрытия (при режимеauto), что делает интерфейс невероятно доступным из коробки.
Часто задаваемые вопросы (FAQ) о Popover API
В чем разница между popover и тегом <dialog>?
Тег <dialog> предназначен исключительно для модальных окон, прерывающих рабочий процесс пользователя (требующих явного взаимодействия, например, «Сохранить» или «Отмена»). Атрибут popover более универсален: он используется для неблокирующих интерфейсов, таких как выпадающие меню, комбобоксы, подсказки (тултипы) и тосты (уведомления).
Как позиционировать popover относительно кнопки?
На данный момент W3C активно разрабатывает спецификацию CSS Anchor Positioning. В комбинации с Popover API это позволит «якорить» поповер (например, тултип) строго под или над кнопкой, которая его вызвала, используя только CSS-свойства anchor-name и position-anchor.
Что такое Top Layer?
Top Layer (Верхний слой) — это специальный слой рендеринга бразуера, который находится поверх всего остального документа, вне зависимости от значений z-index остальных элементов. Popover элементы рендерятся именно в Top Layer, что гарантирует, что они никогда не будут обрезаны свойством overflow: hidden или перекрыты другими блоками.
