HTML popover global attribute

Giá trị

Thuộc tính popover có thể nhận một trong các giá trị sau:

"auto"

Popover kiểu auto có thể được "đóng nhẹ" (light dismiss) — nghĩa là bạn có thể ẩn popover bằng cách nhấp ra ngoài hoặc nhấn phím Esc. Hiển thị một popover auto thường sẽ đóng các popover auto khác đang hiển thị, trừ khi chúng được lồng nhau.

Note: Đặt giá trị rỗng cho popover — popover hoặc popover="" — tương đương với việc đặt popover="auto".

"hint"

Popover kiểu 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ể được đóng nhẹ và sẽ phản hồi với yêu cầu đóng.

"manual"

Popover kiểu manual không thể được "đóng nhẹ" và không tự động đóng. Popover phải được hiển thị và đóng một cách rõ ràng bằng cách sử dụng nút show/hide/toggle khai báo hoặc JavaScript. Có thể hiển thị đồng thời nhiều popover manual độc lập.

Mô tả

Các phần tử popover bị ẩn thông qua display: none cho đến khi được mở bằng phần tử điều khiển (tức là <button> hoặc <input type="button"> với thuộc tính popovertarget) hoặc lệnh gọi HTMLElement.showPopover().

Khi mở, các phần tử popover sẽ xuất hiện phía trên tất cả các phần tử khác trong top layer, và sẽ không bị ảnh hưởng bởi kiểu dáng position hay overflow của các phần tử cha.

Các popover ở trạng thái auto có thể được hiển thị và ẩn bằng các điều khiển liên kết (được chỉ định bởi thuộc tính popovertarget) và được "đóng nhẹ" bằng cách nhấp ra ngoài vùng popover, mở một popover khác, hoặc nhấn các cơ chế dành riêng cho trình duyệt như phím Esc.

Thông thường chỉ có thể hiển thị một popover auto trên màn hình tại một thời điểm — hiển thị popover thứ hai khi đã có một popover đang hiển thị sẽ ẩn popover đầu tiên. Ngoại lệ của quy tắc này là khi bạn có các popover auto lồng nhau. Xem Nested popovers để biết thêm chi tiết.

Chúng cũng có thể được điều khiển bằng JavaScript, ví dụ phương thức HTMLElement.togglePopover() có thể được dùng để chuyển đổi trạng thái hiển thị/ẩn của popover.

Ngược lại, các popover kiểu manual phải được hiển thị và ẩn thủ công — chúng không tự động đóng các popover khác khi được hiển thị và không thể đóng nhẹ. Điều này cho phép các trường hợp sử dụng mà bạn muốn hiển thị nhiều popover cùng một lúc.

Popover kiểu 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 với yêu cầu đóng.

Thông thường các popover hint đượ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ở bị đóng nhẹ.

Để biết thông tin chi tiết về cách sử dụng, xem trang chủ Popover API.

Ví dụ

Biến một phần tử thành popover

Đoạn mã sau tạo ra một nút mà khi được kích hoạt sẽ mở một phần tử popover. Hành vi này có thể đạt được chỉ bằng HTML.

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

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

Lồng các popover

Trong ví dụ này, một nút mở một popover chứa các popover lồng nhau bổ sung. Các popover lồng nhau có thể được mở mà không đóng popover menu gốc.

HTML

Trong phần đầu tiên của HTML, chúng ta tạo một <button> sẽ mở popover chính, là một menu chứa một vài tùy chọn.

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

Trong phần thứ hai của HTML, chúng ta tạo popover menu được mở bởi nút đã tạo ở đoạn code trước. Popover menu này chứa danh sách không thứ tự các mục menu, mỗi mục có một nút thông tin để mở popover lồng nhau. Popover menu sử dụng popover="auto", có nghĩa là nó sẽ không bị đóng khi các popover lồng nhau được mở.

<!-- 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>

Trong phần cuối cùng của HTML, chúng ta tạo các popover thông tin cho từng mục menu. Mỗi popover bao gồm popover="hint", nghĩa là nó sẽ không đóng popover menu gốc nhưng sẽ đóng các popover thông tin khác đang mở.

<!-- 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

header {
  display: flex;
  justify-content: center;
}
header button {
  margin: 0.4rem auto;
}

Chúng ta đã sử dụng định vị neo để định vị popover menu bên dưới <button> và grid để bố trí các mục menu và nút thông tin.

#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;
}

Ở đây, chúng ta đã sử dụng định vị neo để làm cho các popover thông tin xuất hiện ở bên phải các nút thông tin tương ứng.

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

Kết quả

Nhấp vào nút Open Menu, sau đó nhấp vào biểu tượng thông tin (ⓘ) bên cạnh các tùy chọn menu để mở các popover thông tin.

Đặc tả

Tương thích trình duyệt

Xem thêm

• Popover API
• Thuộc tính HTML popovertarget
• Thuộc tính HTML popovertargetaction
• Phần tử giả CSS ::backdrop
• Lớp giả CSS :popover-open