Нативный Popover API в HTML:
Создание всплывающих элементов
HTML теперь поддерживает Popover API — удобный способ создавать всплывающие элементы, такие как подсказки, меню и диалоги, с встроенной поддержкой для закрытия по клику или клавише Esc. Управлять элементами можно как через HTML-атрибуты, так и через JavaScript.
Простой пример
<button popovertarget="my-popover" popovertargetaction="toggle">
Всплываем!
</button>
<div id="my-popover" popover>
<p>🛳️</p>
</div>
Поповер: что это?
Поповер (popover) — это всплывающий элемент в интерфейсе, такой как подсказка (tooltip), меню или превью товара. Popover API создаёт всплывающие элементы с минимальным количеством кода, включая семантическую связь с вызывающим элементом, поддержку клавиатуры и простое закрытие кликом за пределами элемента.
Преимущества Popover API
• Всплытие на верхний уровень: элемент всегда будет выше других, без возни с z-index.
• Простое закрытие: клик за пределами элемента закроет его, вернув фокус на последний активный элемент.
• Поддержка клавиатуры: по нажатию Esc поповер закрывается.
• Фокус внутри поповера: при навигации с клавиатуры фокус остаётся внутри поповера.
• Семантическая связь: привязка поповера к элементу, который его вызывает.
Как использовать
Основные атрибуты
• popover — превращает блок в поповер.
• id — уникальный идентификатор блока для связывания с элементом, который вызывает поповер.
• popovertarget — связывает элемент (например, кнопку) с поповером, используя id поповера.
Пример:
<button popovertarget="my-popover">
Показать поповер
</button>
<div id="my-popover" popover>
<p>Я — простой, но крутой поповер 😎</p>
</div>
Управление поведением кнопок
По умолчанию элемент с popovertarget открывает и закрывает поповер. Это можно изменить с помощью атрибута popovertargetaction.
• toggle (по умолчанию) — переключает состояние между открытым и закрытым.
• show — открывает поповер.
• hide — закрывает поповер.
Пример с отдельными кнопками для открытия и закрытия:
<button popovertarget="my-popover" popovertargetaction="show">
Показать поповер
</button>
<div id="my-popover" popover>
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
Закрыть
</button>
<p>Я — поповер, который нельзя закрыть той же кнопкой</p>
</div>
Значения атрибута popover
• auto (по умолчанию) — только один поповер открывается за раз и закрывается по клику за пределами.
• manual — позволяет открывать несколько поповеров одновременно, которые закрываются только при прямом указании.
Пример:
<button popovertarget="popover-auto">
<code>popover="auto"</code>
</button>
<div id="popover-auto" popover="auto">
<p>Закрываю другие всплывашки. Легко закрываюсь сам.</p>
</div>
<button popovertarget="popover-manual">
<code>popover="manual"</code>
</button>
<div id="popover-manual" popover="manual">
<p>Не закрываю другие. Без кнопки не закроюсь.</p>
</div>
Стилизация
Стили поповера по умолчанию:
[popover] {
position: fixed;
width: fit-content;
height: fit-content;
inset: 0px;
margin: auto;
border: solid;
padding: 0.25em;
}
Вы можете настроить стили поповера и его фона, используя псевдокласс ::backdrop.
[popover]::backdrop {
background-color: rgba(255, 255, 255, 0.5);
}
Анимации
Для добавления анимации при открытии и закрытии поповера определите начальные, промежуточные и конечные состояния.
Начало анимации:
@starting-style {
[popover]:popover-open {
opacity: 0;
rotate: 1turn;
}
}
Стили для открытого поповера:
[popover]:popover-open {
opacity: 1;
rotate: 0turn;
transition: rotate .5s, opacity .5s;
}
И стили для закрытия:
[popover]:not(:popover-open) {
scale: 0;
transition: scale .3s;
}
JavaScript методы
Хотя Popover API позволяет обойтись без JavaScript, в некоторых случаях он может пригодиться. Основные методы:
• .showPopover() — открывает поповер.
• .hidePopover() — закрывает поповер.
• .togglePopover() — переключает состояние между открытым и закрытым.
Пример:
document.getElementById('my-popover').showPopover();
Теперь у вас есть мощный и гибкий инструмент для создания всплывающих элементов в HTML!