Popover API
Popover API недавно стал поддерживаться всеми современными браузерами, а также попал в топ списка для чтения по результатам State of HTML 2023. Это значит, что пришло время поближе познакомиться с этим API.
Popover API — это механизм для создания различных всплывающих элементов интерфейса (поповеров). Механизм преимущественно декларативный, JavaScript не требуется. При этом механизм добавляет много полезного: открытие/закрытие по кнопке, закрытие по Esc и клику вне поповера, встроенные aria-атрибуты, возврат фокуса.
Поповеры бывают двух видов (на данный момент): автоматические и ручные. Автоматический поповер создаётся при помощи кнопки с атрибутом popovertarget, который содержит id поповера. У самого всплывающего элемента при этом должны быть указаны атрибуты popover или popover="auto" и id.
More info
More information...
При нажатии на кнопку, отображается связанный поповер. При повторном нажатии на кнопку, нажатии клавиши Esc или нажатии в любом месте вне поповера, он скрывается.
Ручной поповер создаётся при помощи атрибута popover="manual". Такой поповер не будет закрыт при нажатии в произвольном месте. Для закрытия требуется кнопка с атрибутом popovertargetaction="hide". Также закрыть ручной поповер можно при помощи Esc.
More info
More information...
Close
Помимо значения 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 объявят устаревшими. Дело в том, что новый Invokers API принесёт с собой новые атрибуты, которые заменят текущую реализацию Popover API. Но об этом в другой раз.
Popover API недавно стал поддерживаться всеми современными браузерами, а также попал в топ списка для чтения по результатам State of HTML 2023. Это значит, что пришло время поближе познакомиться с этим API.
Popover API — это механизм для создания различных всплывающих элементов интерфейса (поповеров). Механизм преимущественно декларативный, JavaScript не требуется. При этом механизм добавляет много полезного: открытие/закрытие по кнопке, закрытие по Esc и клику вне поповера, встроенные aria-атрибуты, возврат фокуса.
Поповеры бывают двух видов (на данный момент): автоматические и ручные. Автоматический поповер создаётся при помощи кнопки с атрибутом popovertarget, который содержит id поповера. У самого всплывающего элемента при этом должны быть указаны атрибуты popover или popover="auto" и id.
More info
More information...
При нажатии на кнопку, отображается связанный поповер. При повторном нажатии на кнопку, нажатии клавиши Esc или нажатии в любом месте вне поповера, он скрывается.
Ручной поповер создаётся при помощи атрибута popover="manual". Такой поповер не будет закрыт при нажатии в произвольном месте. Для закрытия требуется кнопка с атрибутом popovertargetaction="hide". Также закрыть ручной поповер можно при помощи Esc.
More info
More information...
Close
Помимо значения 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 объявят устаревшими. Дело в том, что новый Invokers API принесёт с собой новые атрибуты, которые заменят текущую реализацию Popover API. Но об этом в другой раз.