Popover API
Создавайте всплывающие подсказки и диалоговые окна со встроенным атрибутом popover
«Popover API» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Что делает API всплывающих элементов
API всплывающих элементов предоставляет HTML встроенный способ создавать всплывающие элементы, диалоговые окна, подсказки и меню — без ручного JavaScript для позиционирования, управления фокусом, закрытия при клике вне элемента или закрытия клавишей Esc. Встроенное поведение соответствует ожиданиям пользователей.
Атрибут всплывающего элемента
Добавьте popover к любому элементу, чтобы сделать его всплывающим. По умолчанию он скрыт. Кнопка запуска с popovertarget="popover-id" показывает его при нажатии. Браузер автоматически управляет состоянием открытия и закрытия.
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>Режимы всплывающих элементов
popover="auto" (по умолчанию) — закрывается при нажатии за пределами элемента или при нажатии клавиши Esc; одновременно может быть открыт только один всплывающий элемент в режиме auto. popover="manual" — не закрывается автоматически; его необходимо явно закрыть через JS или другой элемент запуска.
Кнопки запуска
Атрибут popovertarget связывает кнопку со всплывающим элементом по его идентификатору. Браузер управляет переключением: нажмите кнопку, чтобы показать элемент, нажмите ещё раз или за его пределами, чтобы закрыть. Для базового использования обработчики событий не нужны.
Отображение на верхнем слое
Всплывающие элементы отображаются на верхнем слое — поверх всего остального содержимого, независимо от порядка наложения или контекста наложения. Это устраняет классическую ошибку «модальное окно скрыто за родителем с переполнением, скрытым через hidden», которая часто возникает в самодельных всплывающих элементах.
Программное открытие и закрытие
JavaScript может открывать и закрывать всплывающие элементы: element.showPopover(), element.hidePopover(), element.togglePopover(). Семантика та же, что и у декларативного запуска, — закрытие при клике вне элемента продолжает работать в режиме auto.
Событие переключения
Всплывающие элементы вызывают событие toggle, когда их состояние изменяется. Свойство newState этого события принимает значение "open" или "closed". Это полезно для аналитики, управления фокусом или согласования других элементов интерфейса с состоянием открытия всплывающего элемента.
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});Псевдокласс CSS
Псевдокласс :popover-open соответствует всплывающим элементам в открытом состоянии. На его основе можно задавать переходы, прозрачность и трансформации: [popover]:popover-open { opacity: 1; transform: none; }.
Позиционирование относительно якоря
В сочетании с API CSS для позиционирования относительно якоря всплывающие элементы можно автоматически размещать относительно кнопки запуска — для классического сценария «подсказка рядом с кнопкой» JavaScript не нужен. Обе возможности входят в одно современное направление развития примитивов интерфейса.
Доступность
Браузер удерживает фокус внутри модальных всплывающих элементов, возвращает фокус к кнопке запуска после закрытия и сообщает программам чтения с экрана об открытом состоянии всплывающего элемента. Для ручной реализации этого поведения требуется значительный объём шаблонного кода ARIA; API всплывающих элементов предоставляет всё необходимое без дополнительных усилий.
Поддержка браузерами
Chrome и Safari поддерживают API всплывающих элементов, а Firefox добавил поддержку позднее. Для более широкой совместимости существует небольшой полифилл. Новые проекты могут использовать нативную реализацию и постепенно добавлять улучшения для старых браузеров.
Замена старых подходов
Многие библиотеки модальных окон на JS, такие как sweetalert и react-modal, в основном существуют для обхода ограничений, которые API всплывающих элементов теперь устраняет нативно. Планируйте переход: меньший объём сборки, лучшие настройки по умолчанию и меньше кода для сопровождения. API всплывающих элементов — одно из самых значительных улучшений HTML за последние годы.
Проверка знаний
Что делает popover="auto", чего не делает popover="manual"?
Итоги
API всплывающих элементов добавляет атрибут всплывающего элемента, а также JS-методы showPopover/hidePopover/togglePopover, связывание кнопки запуска через popovertarget, отображение на верхнем слое поверх всех контекстов наложения, псевдокласс :popover-open и события toggle. В режиме auto элемент закрывается при нажатии вне него, а в режиме manual закрытие выполняется явно. Один примитив HTML заменяет большинство пользовательских библиотек модальных окон и подсказок, правильно обрабатывая доступность, фокус и порядок наложения.
Часто задаваемые вопросы
Урок «Popover API» бесплатный?
Да — полный текст урока «Popover API» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Popover API»?
Создавайте всплывающие подсказки и диалоговые окна со встроенным атрибутом popover Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Popover API»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.