CSSPopover API cho phép dựng popover, tooltip, dropdown bằng HTML thuần — browser lo phần đóng/mở, lớp hiển thị và bàn phím.
<button popovertarget="menu">Mở menu</button>
<div id="menu" popover>
<a href="/tai-khoan">Tài khoản</a>
<button popovertarget="menu" popovertargetaction="hide">Đóng</button>
</div>#menu:popover-open { display: grid; }
#menu::backdrop { background: rgb(0 0 0 / 0.4); }Browser tự xử lý bốn thứ mà trước đây phải viết tay:
1. Top layer — nổi trên mọi thứ, không phụ thuộc z-index hay stacking context.
2. Light dismiss — bấm ra ngoài hoặc nhấn Esc là đóng.
3. Quản lý focus — trả focus về nút đã mở khi đóng.
4. Đóng lẫn nhau — mở popover khác thì cái cũ tự đóng (với popover="auto").
Hai chế độ: popover="auto" (mặc định, có light dismiss) và popover="manual" (chỉ đóng bằng code — hợp với toast).
Khác <dialog modal>: popover không chặn tương tác với phần còn lại của trang. Khi cần chặn tương tác (xác nhận xoá, form bắt buộc), dùng <dialog> với showModal().
Lưu ý: đừng dùng popover cho hộp thoại cần quyết định — người dùng bấm ra ngoài là mất nội dung đang nhập. Đó là lúc cần <dialog modal>, không phải popover.