Popover API появился в базовой версии

Una Kravets

Это происходит! Одна из функций, которая меня больше всего радует, только что появилась во всех современных браузерах и официально стала частью Baseline 2024. И эта функция — Popover API . Popover предоставляет множество потрясающих примитивов и возможностей для разработчиков для создания многоуровневых интерфейсов, таких как всплывающие подсказки, меню, обучающие пользовательские интерфейсы и многое другое.

Некоторые краткие сведения о возможностях всплывающих окон включают в себя:

• Продвижение на верхний слой. Поповеры появятся в верхнем слое над остальной частью страницы, поэтому вам не придется экспериментировать с z-index .
• Функция отключения освещения. Щелчок за пределами области всплывающего окна закроет всплывающее окно и вернет фокус.
• Управление фокусом по умолчанию. Открытие всплывающего окна приводит к тому, что следующая табуляция останавливается внутри всплывающего окна.
• Доступные привязки клавиатуры. Нажатие клавиши esc или двойное переключение закроет всплывающее окно и вернет фокус.
• Доступные привязки компонентов. Семантическое соединение элемента popover с триггером popover.

Создание поповеров

Создать поповеры довольно просто. Чтобы использовать значения по умолчанию, все, что вам нужно, — это button для запуска всплывающего окна и элемент для запуска.

• Сначала установите атрибут popover для элемента, который будет всплывающим окном.
• Затем добавьте уникальный id элемента popover.
• Наконец, чтобы подключить кнопку к всплывающему поповеру, установите popovertarget кнопки значение id элемента всплывающего окна.

Это показано в следующем коде:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

Чтобы иметь более детальный контроль над всплывающими окнами, вы можете явно указать типы всплывающих окон. Например, использование атрибута popover без значения аналогично popover="auto" . Значение auto включает функцию отключения света и автоматически закрывает другие всплывающие окна. Используйте popover="manual" , и вам нужно будет добавить кнопку закрытия. Поповеры, открывающиеся вручную, не закрывают другие всплывающие окна и не позволяют пользователям закрывать всплывающие окна, щелкнув их в пользовательском интерфейсе. Вы создаете всплывающее окно вручную, используя следующее:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

Поповер и модальный диалог

Вы можете задаться вопросом, нужен ли вам всплывающий элемент, когда диалог существует, и ответ: возможно, нет.

Важно отметить, что атрибут popover сам по себе не обеспечивает семантику. И хотя теперь вы можете создавать модальные диалоговые возможности с помощью всплывающего окна, между ними есть несколько ключевых отличий:

Заключение и дальнейшее чтение

popover привносит в платформу множество интересных функций. Чтобы узнать больше об этом API, в том числе о доступности этой функции и документации по набору функций, рекомендуем прочитать следующие материалы:

• Семантика и атрибут popover: что и когда использовать? от Хидде де Врис
• О доступности всплывающих окон: что делает и не делает браузер Хидде де Врис
• Документация MDN по поповеру