Popover API недавно стал поддерживаться всеми современными браузерами, а также попал в топ списка для чтения по результатам State of HTML 2023. Это значит, что пришло время поближе познакомиться с этим API.
Popover API — это механизм для создания различных всплывающих элементов интерфейса (поповеров). Механизм преимущественно декларативный, JavaScript не требуется. При этом механизм добавляет много полезного: открытие/закрытие по кнопке, закрытие по
Esc и клику вне поповера, встроенные aria-атрибуты, возврат фокуса. Поповеры бывают двух видов (на данный момент): автоматические и ручные. Автоматический поповер создаётся при помощи кнопки с атрибутом
popovertarget, который содержит id поповера. У самого всплывающего элемента при этом должны быть указаны атрибуты popover или popover="auto" и id.<button
type="button"
popovertarget="more"
>
More info
</button>
<div id="more" popover>
<p>More information...</p>
</div>
При нажатии на кнопку, отображается связанный поповер. При повторном нажатии на кнопку, нажатии клавиши
Esc или нажатии в любом месте вне поповера, он скрывается. Ручной поповер создаётся при помощи атрибута
popover="manual". Такой поповер не будет закрыт при нажатии в произвольном месте. Для закрытия требуется кнопка с атрибутом popovertargetaction="hide". Также закрыть ручной поповер можно при помощи Esc.<button
type="button"
popovertarget="more"
>
More info
</button>
<div id="more" popover="manual">
<p>More information...</p>
<button
type="button"
popovertarget="more"
popovertargetaction="hide"
>
Close
</button>
</div>
Помимо значения
hide (только закрыть) доступны значения show (только показать) и toggle (переключить видимость).Сам поповер вырывается из основного потока и помещается в специальный слой
top-layer, который всегда будет выше любого z-index. У поповера есть псевдо-элемент ::backdrop, что позволяет стилизовать задний фон (оверлей). Открытый поповер можно стилизовать через псевдо-класс :popover-open. По умолчанию поповер располагается по центру экрана, а его размеры определяются по контенту. Подробнее про стандартные стили поповера можно прочитать в блоге Mayank. Кнопка управления поповером получает встроенные атрибуты
aria-expanded, и aria-details. Если у поповера роль generic, то она заменяется на group, иначе используется встроенная роль или указанная в атрибуте role. Поповер становится следующим элементом в последовательности табуляции, даже если между ним и кнопкой есть другие интерактивные элементы. При закрытии поповера через Esc, фокус возвращается на кнопку, с помощью которой он был показан. Подробнее про доступность поповера в блоге Hidde. В Javascript у кнопки управления поповером доступны методы
showPopover(), hidePopover() и togglePopover() для программного отображения, скрытия и переключения поповера.API доступно в Chrome и Edge 114+, Firefox 125+ и Safari 17+. Для более ранних версий можно использовать полифил. Это позволит избавиться от JavaScript-библиотек, которые воспроизводят функциональность Popover API. Когда поддержка будет лучше, полифил можно будет отключить.
API продолжает развиваться. В будущем нас ожидают доработки:
popover="hint", ::tooltip и role="tooltip" для тултипов, Anchor Positioning API для позиционирования и т.д. Забавный факт: известно, что все эти новые атрибуты из Popover API объявят устаревшими. Дело в том, что новый Invoker Commands API принесёт с собой новые атрибуты, которые заменят текущую реализацию Popover API. Но об этом в другой раз.
