HTML Popover API: всплывающие меню и подсказки без лишнего JavaScript

HTML Popover API — современный способ делать всплывающие элементы: меню пользователя, подсказки, фильтры, мини-корзину, панели действий. Главное преимущество: базовое открытие и закрытие работает без фреймворков и большого JavaScript-кода.

Если вы учитесь верстать интерфейсы и хотите системно разобраться в HTML, CSS и практической сборке страниц, обратите внимание на курс «Вёрстка сайта с нуля 2.0» — понятный путь от макета до готовой страницы. А ниже разберём конкретный инструмент, который уже можно применять в реальных проектах.

Что такое HTML Popover API

Popover — это HTML-элемент, который браузер умеет показывать поверх страницы в специальном верхнем слое. Для этого достаточно добавить атрибут popover к блоку и связать его с кнопкой через popovertarget.

<button popovertarget="user-menu">Профиль</button>

<div id="user-menu" popover>
  <ul>
    <li><a href="/profile">Мой профиль</a></li>
    <li><a href="/settings">Настройки</a></li>
    <li><a href="/logout">Выйти</a></li>
  </ul>
</div>

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

Базовая стилизация popover

Сам по себе popover не выглядит как готовое меню. Его нужно оформить через CSS. Для открытого состояния используется псевдокласс :popover-open.

#user-menu {
  width: 220px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

#user-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#user-menu a {
  display: block;
  padding: 8px 10px;
  color: #222;
  text-decoration: none;
  border-radius: 8px;
}

#user-menu a:hover {
  background: #f2f4f8;
}

#user-menu:popover-open {
  animation: popoverFade 0.15s ease-out;
}

@keyframes popoverFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Важно: popover по умолчанию появляется в центре области просмотра. Если вам нужно расположить его рядом с кнопкой, можно использовать CSS Anchor Positioning, но поддержка этого механизма пока развивается. В простых проектах часто достаточно небольшого JavaScript для вычисления позиции.

Режимы popover: auto и manual

У атрибута popover есть режимы. Самый удобный для меню и подсказок — auto. Он используется по умолчанию:

<div id="help" popover="auto">
  Подсказка закроется по Esc или клику вне блока.
</div>

Режим manual подходит, когда вы хотите полностью контролировать открытие и закрытие через JavaScript. Например, для уведомления, которое не должно исчезать при случайном клике по странице.

<button id="show-alert">Показать уведомление</button>

<div id="alert-popover" popover="manual">
  <p>Настройки успешно сохранены.</p>
  <button id="close-alert">Закрыть</button>
</div>

<script>
  const alertPopover = document.querySelector('#alert-popover');

  document.querySelector('#show-alert').addEventListener('click', () => {
    alertPopover.showPopover();
  });

  document.querySelector('#close-alert').addEventListener('click', () => {
    alertPopover.hidePopover();
  });
</script>

Полезные методы JavaScript

HTML Popover API предоставляет три основных метода:

• showPopover() — открыть элемент;
• hidePopover() — закрыть элемент;
• togglePopover() — переключить состояние.

Это удобно, когда нужно добавить условную логику: например, открыть подсказку только после проверки данных.

const info = document.querySelector('#info-popover');
const button = document.querySelector('#info-button');

button.addEventListener('click', () => {
  if (!info.matches(':popover-open')) {
    info.showPopover();
  } else {
    info.hidePopover();
  }
});

Пример: подсказка к кнопке

Сделаем простую подсказку, которая открывается по кнопке. Такой вариант полезен для пояснения сложных настроек, тарифов или полей интерфейса.

<button class="hint-button" popovertarget="price-hint" aria-label="Показать подсказку">
  Что входит в цену?
</button>

<div id="price-hint" class="hint-popover" popover>
  В стоимость входят обновления, поддержка и доступ к материалам курса.
</div>

.hint-popover {
  max-width: 280px;
  padding: 14px 16px;
  border: 0;
  border-radius: 10px;
  background: #1f2937;
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
}

.hint-popover::backdrop {
  background: transparent;
}

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

Чем popover отличается от dialog

Новички часто путают popover и <dialog>. Разница простая:

• popover — для легковесных всплывающих элементов: меню, подсказок, небольших панелей;
• dialog — для модальных окон, где нужно сфокусировать внимание пользователя на важном действии.

Не стоит делать форму оплаты или подтверждение удаления через popover. Для таких задач лучше подходит диалог с продуманной доступностью и управлением фокусом.

Доступность и хорошие практики

• Используйте настоящую кнопку <button> для открытия popover, а не <div> с обработчиком клика.
• Давайте всплывающему элементу понятный текст и не перегружайте его контентом.
• Проверяйте управление с клавиатуры: Tab, Shift+Tab и Esc.
• Не используйте popover для всего подряд. Если элемент постоянно нужен пользователю, лучше показать его прямо на странице.
• Проверяйте поддержку в целевых браузерах. Для старых браузеров может понадобиться fallback.

Мини-шаблон для реального проекта

Ниже — компактный шаблон выпадающего меню действий. Его можно использовать в карточке товара, таблице заказов или административной панели.

<button class="actions-button" popovertarget="card-actions">
  Действия
</button>

<nav id="card-actions" class="actions-menu" popover>
  <a href="/edit">Редактировать</a>
  <a href="/duplicate">Дублировать</a>
  <button type="button">Удалить</button>
</nav>

.actions-menu {
  min-width: 180px;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.actions-menu a,
.actions-menu button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #111827;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.actions-menu a:hover,
.actions-menu button:hover {
  background: #f3f4f6;
}

Итоги

HTML Popover API заметно упрощает создание всплывающих меню и подсказок. Для базового поведения достаточно HTML-атрибутов popover и popovertarget, а JavaScript нужен только для более сложной логики. Используйте popover для небольших вспомогательных интерфейсов, не забывайте про клавиатуру и доступность — и ваши страницы станут удобнее без лишних зависимостей.