HTMLButtonElement: свойство popoverTargetAction

Свойство popoverTargetAction интерфейса HTMLButtonElement получает и устанавливает действие, которое должно быть выполнено ("hide", "show", или "toggle") над элементом всплывающей подсказки, управляемым кнопкой.

Оно отражает значение атрибута HTML popovertargetaction.

Перечисление. Возможные значения:

"hide"

Кнопка скроет отображаемую всплывающую подсказку. Если вы попытаетесь скрыть уже скрытую подсказку, действие не будет выполнено.

"show"

Кнопка отобразит скрытую всплывающую подсказку. Если вы попытаетесь отобразить уже отображаемую подсказку, действие не будет выполнено.

"toggle"

Кнопка переключит всплывающую подсказку между отображением и скрытием. Если подсказка скрыта, она будет отображена; если отображена, она будет скрыта. Если popoverTargetAction не задано, "toggle" является значением по умолчанию, которое будет выполнено кнопкой-управлением.

Этот пример демонстрирует базовое использование API всплывающей подсказки со значением "toggle" для свойства popoverTargetAction. Атрибут popover задан как "auto", поэтому всплывающую подсказку можно закрыть ("легко закрыть"), щелкнув за пределами области всплывающей подсказки.

Сначала мы определяем HTML-элемент <button>, который будет использоваться для отображения и скрытия всплывающей подсказки, и элемент <div>, который будет всплывающей подсказкой. В этом случае мы не устанавливаем атрибут HTML popovertargetaction на элементе <button> или атрибут popover на элементе <div>, так как мы будем делать это программно.

<button id="toggleBtn">Toggle popover</button>
<div id="mypopover">This is popover content!</div>

Код JavaScript сначала получает доступ к элементам <div> и <button>. Затем он определяет функцию для проверки поддержки всплывающей подсказки.

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

// Check for popover API support.
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

Если API всплывающей подсказки поддерживается, код устанавливает атрибут <div> элемента popover в значение "auto" и делает его целевым элементом для кнопки переключения. Затем мы устанавливаем свойство popoverTargetAction элемента <button> в значение "toggle". Если API всплывающей подсказки не поддерживается, мы изменяем содержимое элемента <div> для указания этого и скрываем кнопку переключения.

if (supportsPopover()) {
  // Set the <div> element to be an auto popover
  popover.popover = "auto";
  // Set the button popover target to be the popover
  toggleBtn.popoverTargetElement = popover;

  // Set that the button toggles popover visibility
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = "Popover API not supported.";
  toggleBtn.hidden = true;
}

Вы можете попробовать пример ниже. Отображайте и скрывайте всплывающую подсказку, переключая кнопку. Всплывающую подсказку "auto" также можно закрыть, выбрав область за пределами области текста всплывающей подсказки.

Этот пример демонстрирует использование значений "show" и "hide" атрибута popoverTargetAction.

Код почти идентичен предыдущему примеру, за исключением того, что есть два элемента <button>, и всплывающая подсказка настроена на "manual". Всплывающую подсказку manual нужно закрывать явно, а не "легко закрывать" выбором области за пределами области всплывающей подсказки.

<button id="showBtn">Show popover</button>
<button id="hideBtn">Hide popover</button>
<div id="mypopover">This is popover content!</div>

function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

const popover = document.getElementById("mypopover");
const showBtn = document.getElementById("showBtn");
const hideBtn = document.getElementById("hideBtn");

const popoverSupported = supportsPopover();

if (supportsPopover()) {
  // Set the <div> element be a manual popover
  popover.popover = "manual";

  // Set the button targets to be the popover
  showBtn.popoverTargetElement = popover;
  hideBtn.popoverTargetElement = popover;

  // Set the target actions to be show/hide
  showBtn.popoverTargetAction = "show";
  hideBtn.popoverTargetAction = "hide";
} else {
  popover.textContent = "Popover API not supported.";
  showBtn.hidden = true;
  hideBtn.hidden = true;
}

Всплывающую подсказку можно отобразить, выбрав кнопку "Показать всплывающую подсказку", и скрыть, используя кнопку "Скрыть всплывающую подсказку".

• API всплывающих подсказок