popover глобальный атрибут HTML

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

Значение

Атрибут popover может принимать одно из следующих значений:

"auto"

Всплывающие окна auto можно закрыть щелчком вне окна — это означает, что скрыть всплывающее окно можно, щёлкнув за его пределами или нажав клавишу Esc. Открытие всплывающего окна auto обычно закрывает другие уже отображаемые всплывающие окна auto, если только они не вложены друг в друга.

Примечание: Пустое значение для popover — popover или popover="" — равносильно значению popover="auto".

"hint"

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

"manual"

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

Описание

Всплывающие окна скрыты с помощью display: none до тех пор, пока не будут открыты вызывающим элементом или элементом управления (например, <button> или <input type="button"> с атрибутом popovertarget) либо вызовом HTMLElement.showPopover().

Открытые всплывающие окна отображаются поверх всех остальных элементов в верхнем слое, и на них не влияют стили родительских элементов position или overflow.

Всплывающие окна в состоянии auto можно показывать и скрывать с помощью связанных элементов управления (обозначенных атрибутом popovertarget), а также закрывать щелчком вне области всплывающего окна, открытием другого всплывающего окна или с помощью специфичных для браузера механизмов, например клавиши Esc.

Как правило, на экране может отображаться только одно всплывающее окно auto: при показе второго всплывающего окна уже открытое будет скрыто. Исключение составляют вложенные автоматические всплывающие окна. Подробнее см. в разделе Вложенные всплывающие окна.

Всплывающими окнами также можно управлять с помощью JavaScript. Например, метод HTMLElement.togglePopover() позволяет переключать состояние всплывающего окна между открытым и скрытым.

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

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

Обычно всплывающие окна hint показываются и скрываются в ответ на события JavaScript, не связанные со щелчками, например mouseover/mouseout и focus/blur. Щелчок по кнопке, открывающей всплывающее окно hint, приведёт к закрытию щелчком вне окна открытого всплывающего окна auto.

Подробные сведения об использовании см. на главной странице API всплывающих окон.

Примеры

Как сделать элемент всплывающим окном

Следующий код создаёт кнопку, которая при активации открывает всплывающий элемент. Такого поведения можно добиться только с помощью HTML.

<button popovertarget="my-popover">Open Popover</button>

<div popover id="my-popover">Greetings, one and all!</div>

Вложенные всплывающие окна

В этом примере кнопка открывает всплывающее окно, содержащее дополнительные вложенные всплывающие окна. Вложенные всплывающие окна можно открывать, не закрывая исходное всплывающее меню.

HTML

В первой части HTML мы создаём <button>, которая откроет основное всплывающее окно — меню с несколькими вариантами.

<header>
  <button popovertarget="menu">Open Menu</button>
</header>
<main>
  <!--  Page content goes here  -->
</main>

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

<!-- menu popover -->
<div id="menu" popover="auto">
  <ul>
    <li>
      <a href="#">New thing</a><button popovertarget="new-info">ⓘ</button>
    </li>
    <li>
      <a href="#">Open thing</a><button popovertarget="open-info">ⓘ</button>
    </li>
    <li>
      <a href="#">Save thing</a><button popovertarget="save-info">ⓘ</button>
    </li>
    <li>
      <a href="#">Close thing</a><button popovertarget="close-info">ⓘ</button>
    </li>
  </ul>
</div>

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

<!-- info popovers -->
<div id="new-info" class="info-popover" popover="hint">
  This is some information about <strong>creating a new</strong> thing.
</div>
<div id="open-info" class="info-popover" popover="hint">
  This is some information about <strong>opening an existing</strong> thing.
</div>
<div id="save-info" class="info-popover" popover="hint">
  This is some information about <strong>saving the current</strong> thing.
</div>
<div id="close-info" class="info-popover" popover="hint">
  This is some information about <strong>closing the current</strong> thing.
</div>

CSS

Для размещения всплывающего меню под <button> мы использовали позиционирование относительно якоря, а для расположения пунктов меню и информационных кнопок — сетку.

#menu {
  margin: 0;
  margin-top: 0.4rem;
  inset: auto;
  position-area: bottom;
}
#menu ul {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem;
  padding: 0.4rem;
}
#menu li {
  grid-column: span 2;
  display: grid;
  grid: inherit;
  grid-template-columns: subgrid;
  gap: 1.4rem;
}
li [popovertarget] {
  cursor: pointer;
  font-size: 1.2rem;
}
li button {
  border: none;
  padding: 0;
  background-color: inherit;
}

Здесь мы использовали позиционирование относительно якоря, чтобы информационные всплывающие окна появлялись справа от соответствующих информационных кнопок.

div.info-popover {
  margin: 2rem;
  inset: auto;
  max-width: 300px;
  position-area: right;
}

Результат

Нажмите кнопку Открыть меню, затем нажмите значки информации (ⓘ) рядом с пунктами меню, чтобы открыть информационные всплывающие окна.

Спецификации

Совместимость с браузерами

См. также

• API всплывающих окон
• popovertarget — HTML-атрибут
• popovertargetaction — HTML-атрибут
• ::backdrop — CSS-псевдоэлемент
• :popover-open — CSS-псевдокласс