Popover API: делаем меню и подсказки на чистом HTML

Popover API можно освоить на одном небольшом проекте, если сразу видеть вход, действие и результат. Нативные атрибуты popover и popovertarget связывают кнопку с всплывающим слоем без ручного переключения display. Ниже вы соберёте работающий пример и проверите обычный и граничный сценарии.

Самодельное меню легко забывает про Escape, фокус, клик снаружи и слой поверх остального интерфейса. Поэтому отделим настройку, входные данные, основное действие и проверку. В этой статье вы соберёте меню профиля с light dismiss и отдельную подсказку, которые открываются нативной кнопкой и аккуратно анимируются. Проверка: кнопка открывает меню, Escape и клик снаружи закрывают его, Tab проходит по ссылкам, а страница работает без отдельной библиотеки.

Как устроен учебный проект Popover API

Кнопка declaratively указывает id popover, браузер управляет верхним слоем и состоянием открытия, а CSS оформляет :popover-open и backdrop. Держите ввод, логику и отображение раздельно: тогда каждый этап можно проверить отдельно.

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

От входных данных до видимого результата. Сначала проверяется вход, затем действие и только потом интерфейс.

Собираем рабочий пример шаг за шагом

Пример сверялся с актуальной документацией MDN Popover API на 19 октября 2026 года. Создайте простой HTML-файл и откройте через локальный сервер. Для базового popover сборщик и зависимости не нужны. Проверьте текущую папку через pwd или Get-Location. Вставьте пример целиком, выполните один раз, затем разбирайте по частям.

<button type="button" popovertarget="profile-menu">
  Открыть профиль
</button>

<nav id="profile-menu" popover="auto" aria-label="Меню профиля">
  <a href="/profile">Мой профиль</a>
  <a href="/settings">Настройки</a>
  <button type="button" popovertarget="profile-menu" popovertargetaction="hide">
    Закрыть
  </button>
</nav>

<style>
  #profile-menu {
    border: 0;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 20px 60px #18203d33;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 160ms, transform 160ms, display 160ms allow-discrete;
  }
  #profile-menu:popover-open { opacity: 1; transform: translateY(0); }
  @starting-style { #profile-menu:popover-open { opacity: 0; transform: translateY(-8px); } }
</style>

popovertarget задаёт управляющую кнопку, а значение auto включает взаимное закрытие и light dismiss. Найдите в примере вход, проверку и место формирования результата.

Что отличает устойчивый проект от случайного запуска. Явные границы делают ошибку локальной и понятной.

Что происходит внутри и почему это работает

Открытый popover попадает в top layer, поэтому ему не нужно соревноваться с огромными z-index внутри обычного stacking context. Браузер также создаёт неявную связь управления для доступных технологий. Логику держите отдельно от вывода: функция получает аргумент и возвращает значение, а интерфейс показывает его. Popover не всегда заменяет dialog. Если пользователь должен завершить действие до возврата к странице, нужен модальный <dialog>, а не немодальная подсказка.

Не превращайте popover в контейнер для всего приложения. Он хорошо подходит небольшому меню, палитре действий, фильтру или подсказке. Для сложной формы решите, должна ли она быть модальной. Не удаляйте видимый focus outline и проверяйте порядок клавиатуры. Не прячьте поток в одном обработчике: сохраните вход, проверьте его, вызовите операцию и только затем обновите интерфейс.

Проверяем проект и добавляем свою функцию

Добавьте второй popover с popover="manual" для уведомления и сравните: он не закрывается от обычного light dismiss, поэтому требует явного управления. До правки запишите ожидаемое поведение одним предложением. После граничного теста повторите обычный сценарий.

Нативный primitive уменьшает код только тогда, когда вы сохраняете правильную семантику меню, подсказки и диалога. Полезная правка проходит от нового ввода до видимого результата.

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

Что запомнить и куда двигаться дальше

Проверьте клавиатуру, масштаб 200 процентов, мобильную ширину и старый браузер. При необходимости добавьте небольшое условное улучшение, но не дублируйте нативную логику целой библиотекой. Для закрепления откройте в доступном бургер-меню, в статье про тёмную тему и в View Transitions API.

Как изучить тему в Кодике

Начните с button, nav, id и фокуса, затем изучайте top layer и дискретные переходы. Сначала восстановите главную функцию и проверьте её на трёх значениях.

Сравните popover, dialog и обычный раскрывающийся блок, объяснив выбор для каждого сценария. Базовый синтаксис закрепите через курс HTML.

Что получится в итоге

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