В Chrome 114, который вышел в конце мая 2023, завезли Popover API. Firefox и Safari поддержали этот API и должны выкатить в ближайшее время. И это крутая новость!
<button popovertarget="note">
Подробнее
</button>
<div id="note" popover>
Всплывающая подсказка
</div>
Этот API позволит решать широкий набор задач по разработке UI-элементов без необходимости тянуть JS, декларативно, с возможностью стилизации и поддержкой доступности. Тултипы, поповеры, выпадающие списки, меню - все это со временем можно будет делать в браузере нативно. Подробнее об этом API можно почитать в предложении от Open UI, а я в вкратце расскажу суть.
Добавляется 3 новых HTML-атрибута:
1) Атрибут
popover, popover="auto" или popover="manual" делает элемент поповером. Он вырывается из контекста документа, перемещается на верхний слой (top-layer) и скрывается (display: none)2) Атрибут
popovertarget="{id}" указывается у <button> и содержит id поповера. Тем самым создаётся элемент-триггер, который будет управлять поповером. При клике на элемент, поповер будет показываться или скрываться.3) Атрибут
popovertargetaction также указывается у <button>. Принимает значения show (при клике на триггер будет только показываться), hide (только скрываться) или toggle (переключаться, это значение по умолчанию).В CSS добавляется псевдокласс
:popover-open для стилизации открытого поповера. Можно, например, поиграться с позиционированием или сделать хвостик. У поповера есть псевдоэлемент ::backdrop, который можно стилизовать, например сделать затемненный фон.В JS добавляется 3 метода для элементов с атрибутом popover:
showPopover(), hidePopover() и togglePopover() для программного управления отображением. Добавляется новое событие beforetoggle, которое возникает перед появлением поповера. Можно, например, сделать fetch и подставить данные в поповер. Вместе с событием появляется и новый интерфейс события ToggleEvent, в котором будет состояние поповера.С точки зрения доступности у кнопки с
popovertarget подразумевается встроенный aria-expanded, но не aria-haspopup. Роль самого поповера сохраняется, нужно указывать вручную. Зато есть нативный focus-trap и закрытие по Esc.Ложка дегтя. Пока не понятно, что там с отображением по
hover. В обсуждении есть атрибут popoverhoveraction, но он не стандартизован, поэтому тултипы пока не сделать. Думаю, это вопрос времени. Также хотелось бы встроенные aria. Но начало хорошее, крутая апишка.