Содержание
Open UI продолжает развивать Popover API. В спецификацию HTML добавили третье значение для атрибута popover - hint, которое стало доступно в 133 версии Хрома.
Предыстория
Изначально popover имел только два значения:
auto;manual.
Чем отличаются auto от manual подробно рассказывал в своем докладе на FrontendConf 2024, но если вкратце:
- одновременно на экране может быть только один auto popover (не считая родительских / дочерних поповеров);
- auto popover умеет закрываться по клику вне поповера (light dismiss) и по нажатию на Escape.
Auto поповер отлично подходит для кейсов, когда нужно по клику на кнопку открывать всплывающий элемент. Например, меню.
Manual поповер подходит для кейсов, когда не нужен light dismiss или когда нужна более сложная кастомная логика. Например, всплывающие нотификации.
Зачем нужен hint?
Допустим, у нас есть несколько кнопок - каждая по клику открывает отдельное меню, реализованное через popover="auto". Также мы хотим, что у кнопок на ховер были тултипы, объясняющие, что каждая из кнопок делает. При этом, если открыто меню А, мы не хотим, чтобы оно пропадало, если мы наведем на кнопку Б и покажется тултип.
На auto popover’aх это разрулить не получится, поскольку на экране может быть только один независимый auto popover. Можно использовать для тутлтипов manual popover - но тогда придется использовать JS, чтобы добавить закрытие по клику извне.
Неудобно.
В качестве решения проблемы инициативная группа Open UI предложила ввести третье значение - hint, которое вводит отдельный стек для подобного рода поповеров.
Таким образом, теперь у нас есть два стека:
- постоянный UI. Например, меню и диалоги;
- временный UI. Например, всплывающие подсказки.
Первое реализуем через popover="auto", второе через popover="hint".
Открытие auto поповера будет триггерить закрытие несвязанных с ним auto и hint поповеров.
Открытие hint поповера будет триггерить закрытие несвязанных с ним hint поповеров.
Показ / скрытие popover="hint"
На данный момент добавить показ / скрытие хинта по ховеру без использования JS мы не можем. Но очень надеюсь, что в скором времени Interest Invokers войдут в спеку, и тогда открывать / скрывать подсказки по ховеру можно будет декларативно, примерно так же, как сейчас работает атрибут popovertarget.
Демки
Чтобы лучше разобраться, как оно работает и в чем отличие auto и hint поповеров собрал на codepen коллекцию демок.
Типы поповеров: auto, hint, manual
В первой демке показывается, как влияют друг на друга разные типы поповеров и как реагируют на light dismiss.
Различия между auto и hint поповерами
Во второй демке собрал примеры показывающие, как себя будут вести auto и hint поповеры по-всякому вложенные друг в друга.
Использование auto и hint поповеров: меню и тултипы
В третьей демке попробовал применить auto и hint поповеры на практике. Сделал менюшки (popover="auto"), которые открываются на клик. И тултипы (popover="hint"), которые показываются на ховер. Как видим, показ тултипов никак не влияет на показ меню. Все работает так, как мы и привыкли.
P.S. демки работают только в Chrome 133+.
Что еще почитать?
Более подробно про поповер hint можно почитать в эксплейнере от OpenUI или в статье Хрома.