HTMLButtonElement: свойство popoverTargetElement

Свойство popoverTargetElement интерфейса HTMLButtonElement получает и устанавливает элемент всплывающей подсказки (popover), который контролируется кнопкой.

Это JavaScript-аналог HTML-атрибута popovertarget.

Ссылка на элемент всплывающей подсказки (popover) в DOM.

Этот пример демонстрирует базовое использование API всплывающих подсказок (popover), устанавливая элемент <div> в качестве всплывающей подсказки и затем устанавливая его в качестве целевого элемента popoverTargetElement для <button>. Атрибут popover установлен на "manual", поэтому всплывающая подсказка должна быть закрыта с помощью кнопки, а не закрываться автоматически при выборе области вне всплывающей подсказки.

Сначала мы определяем 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 всплывающих подсказок поддерживается, код устанавливает атрибут popover элемента <div> в значение "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" также может быть закрыта, если навести курсор вне границ текста всплывающей подсказки.

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