Эта страница переведена с помощью Cloud Translation API.

Поповер = подсказка

Keith Cirkel

Mason Freed

Опубликовано: 26 февраля 2025 г.

Chrome 133 развивает существующую функцию всплывающего окна, вводя новый режим: popover="hint" . Этот режим, управляемый браузером, обеспечивает новый контекст стекирования, который упрощает создание всплывающих подсказок и аналогичных временных плавающих элементов. Это сокращает усилия разработчиков, сохраняя при этом гибкость дизайна.

Введение и история

API Popover, представленный в Chrome 114 , позволяет создавать доступные плавающие пользовательские интерфейсы, такие как меню и всплывающие подсказки. По умолчанию popover="auto" обрабатывает функции отключения света и управления фокусом без необходимости создания дополнительных сценариев, как описано в разделе Знакомство с API Popover . При открытии поповера popover="auto" все остальные поповеры, не являющиеся предками, с popover="auto" будут закрыты, что обеспечивает эргономичный API, который делает наиболее разумные действия.

Поповеры закрывают другие поповеры

<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>

В этом примере открытие всплывающего окна 2 приведет к закрытию всплывающего окна 1 , поскольку popover="auto" позволяет открывать одновременно только одно такое всплывающее окно.

Хотя такое поведение хорошо работает для меню и диалоговых окон, оно может создавать проблемы при сосуществовании нескольких типов плавающего пользовательского интерфейса. Например, меню и всплывающая подсказка, использующие popover="auto" могут конфликтовать, когда открытие всплывающей подсказки закрывает меню. Это может показаться необычной ситуацией, но она часто встречается в пользовательском интерфейсе современного приложения. Например, меню в заголовке github.com используют всплывающие окна как для меню, так и для всплывающих подсказок, что позволяет одновременно видеть их при определенных условиях:

Один из способов решения этой проблемы — использовать popover="manual" для элементов всплывающей подсказки, что позволяет полностью контролировать всплывающее окно с помощью сценариев. Однако для этого требуется переопределить поведение штабелирования, отключение света и управление фокусом — именно для этих задач был разработан Popover API. Это побудило нас изучить способы расширения API, чтобы обеспечить недостающую функциональность.

В ходе исследований разработчиков мы определили два распространенных контекста стекирования:

Постоянный пользовательский интерфейс : например, меню и диалоговые окна.
Эфемерный пользовательский интерфейс : например, всплывающие подсказки и всплывающие подсказки.

Чтобы обеспечить и то, и другое, popover="hint" вводит второй стек, отличный от popover="auto" , гарантирующий, что меню остаются открытыми даже при появлении всплывающих подсказок. Вместо того, чтобы вводить несколько контекстов стекирования для разных типов пользовательского интерфейса — что, по сути, привело бы к новому изобретению z-index — этот подход упрощает задачу, определяя всего две широкие категории: постоянный пользовательский интерфейс ( auto ) и эфемерный пользовательский интерфейс ( hint ). Это обеспечивает баланс между гибкостью и избежанием повторного появления тех же проблем, с которыми вы сталкивались до использования поповера.

Поведение нового значения

И popover="auto" , и popover="hint" поддерживают световое отклонение , что означает, что они автоматически закрываются, когда пользователь щелкает за их пределами или нажимает Esc на клавиатуре. В этом отношении оба стиля идентичны.

Когда дело доходит до принудительного скрытия других всплывающих окон, popover="auto" закрывает все другие auto и hint окна при открытии, гарантируя, что одновременно активен только один такой всплывающий элемент (единственным исключением здесь являются вложенные всплывающие окна, описанные ниже). popover="hint" , с другой стороны, только принудительно скрывает другие hint , позволяя меню и всплывающим подсказкам оставаться открытыми и сосуществовать.

Больше всего они различаются в своем гнездовом поведении. popover="auto" поддерживает вложенность, позволяя дочернему поповеру оставаться открытым внутри другого родительского поповера. popover="hint" имеет особое поведение вложенности, при котором появляются отдельные «стеки». Когда всплывающее окно hint находится внутри auto всплывающего окна, оно присоединяется к auto стеку для поддержания контекстной группировки, то есть оно будет оставаться открытым до тех пор, пока другие auto всплывающие окна или всплывающие окна hint не заставят его принудительно скрыться. Это обеспечивает интуитивное поведение, при котором всплывающие подсказки не прерывают работу других меню или всплывающих окон.

Наконец, для самых разных случаев использования всегда существует popover="manual" , который не содержит ни одного из этих встроенных вариантов поведения, что позволяет вам определить точную функциональность и поведение, которые вам нужны.

	`popover="auto"`	`popover="hint"`	`popover="manual"`
Свет отклонить	Да	Да	Нет
Силовые шкуры:	Несвязанные `auto` и `hint`	Несвязанные `hint`	Ничего
Вложенность:	Да	Специальный (описан ранее)	Н/Д — нет света, закрытие

Запуск при наведении

Распространенным шаблоном UX является то, что всплывающие подсказки и hovercards активируются при наведении курсора . Наведение курсора мыши на интересующий элемент в течение определенного периода времени приводит к отображению hovercard. В настоящее время это поведение необходимо реализовать с помощью JavaScript, например, добавив прослушиватели событий mouseenter и mouseleave . Однако в стадии разработки находится еще один API, который должен сделать срабатывание наведения декларативным: API Interest Invokers .

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

<a interesttarget="my-hovercard" href="...">
  Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
  This is the hovercard
</span>

В приведенном выше HTML-коде при наведении курсора на ссылку <a> автоматически отображается всплывающее окно my-hovercard . Перемещение указателя за этот элемент скроет всплывающее окно. И все без JavaScript!

Примеры

<button>An interesting button</button>
<div popover="hint">More info about the button</div>

[popover] {
  margin: 0;
  inset: auto;
  position-area: bottom right;
}

const button = document.querySelector('button');
const popover = document.querySelector('[popover]');

button.onmouseenter = () => {
  setTimeout(() => {
    popover.showPopover({source: button});
  }, 500);
}

button.onmouseleave = () => {
  setTimeout(() => {
    popover.hidePopover();
  }, 500);
}

Кнопка с подсказкой. — Попробуйте это вживую.

В этом примере используется popover="hint" для создания базовой всплывающей подсказки, которая предоставляет дополнительную информацию о кнопке при наведении на нее мыши. Активация при наведении обеспечивается обработчиками событий mouseenter и mouseleave с простой задержкой в 0,5 секунды. Обратите внимание, что есть несколько деталей, которые не обрабатываются в этом примере:

Наведение курсора на всплывающее окно само по себе не препятствует закрытию всплывающего окна при наведении курсора на триггерный элемент. Например, невозможно скопировать или вставить текст из всплывающего окна.
Никакого «отскока» нет: наведения кнопки на небольшую долю секунды достаточно, чтобы вызвать всплывающее окно, даже если кнопку быстро навести на нее до истечения времени задержки. В этом случае всплывающая подсказка «мерцает», открываясь и быстро закрываясь.
Пример вообще недоступен: любой пользователь, не использующий мышь, не может получить доступ к содержимому всплывающей подсказки.

Эти недостатки можно исправить с помощью дополнительного JavaScript. Например, необходимо добавить обработчики событий focus (или, возможно, keydown и keyup) , чтобы поддерживать активацию всплывающего окна с помощью клавиатуры. Объяснение того, что необходимо правильно обработать, чтобы всплывающая подсказка была доступна, можно найти в замечательном сообщении в блоге Сары Хигли. Все эти проблемы (и многие другие) будут автоматически декларативно обрабатываться API Interest Invokers .

Узнать больше

Более подробную информацию см. в описании функций или в спецификации HTML .