HTMLElement: thuộc tính popover

Baseline 2025 *

Newly available

Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Thuộc tính popover của giao diện HTMLElement lấy và đặt trạng thái popover của phần tử qua JavaScript ("auto", "hint" hoặc "manual"), và có thể được dùng để phát hiện tính năng.

Nó phản ánh giá trị của thuộc tính HTML toàn cục popover.

Giá trị

Một giá trị liệt kê; các giá trị có thể là:

"auto"

Các popover auto có thể "đóng nhẹ" - nghĩa là bạn có thể ẩn popover bằng cách nhấp ngoài nó hoặc nhấn phím Esc.

Thường, chỉ có thể hiển thị một popover auto tại một thời điểm - hiển thị popover thứ hai khi một popover đang hiển thị sẽ ẩn popover đầu tiên. Ngoại lệ cho quy tắc này là khi bạn có các popover auto lồng nhau. Xem Popover lồng nhau để biết thêm chi tiết.

"hint"

Các popover hint không đóng các popover auto khi chúng được hiển thị, nhưng sẽ đóng các popover hint khác. Chúng có thể đóng nhẹ và sẽ phản hồi các yêu cầu đóng.

Thường chúng được hiển thị và ẩn để phản hồi các sự kiện JavaScript không phải nhấp chuột như mouseover/mouseout và focus/blur. Nhấp vào nút để mở popover hint sẽ khiến popover auto đang mở đóng nhẹ.

"manual"

Các popover manual không thể "đóng nhẹ" và không tự động đóng. Các popover phải được hiển thị và đóng một cách rõ ràng bằng cách dùng các nút hiển thị/ẩn/bật-tắt khai báo hoặc JavaScript. Nhiều popover manual độc lập có thể được hiển thị đồng thời.

Ví dụ

Phát hiện tính năng

Bạn có thể dùng thuộc tính popover để phát hiện tính năng của API Popover:

function supportsPopover() {
  return Object.hasOwn(HTMLElement.prototype, "popover");
}

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

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("Popover API not supported.");
}