<>📌 Popover là một dạng UI component hiển thị nội dung bổ sung khi người dùng tương tác với một phần tử trên giao diện (ví dụ: nhấp chuột hoặc di chuột vào một nút). Nó thường xuất hiện bên cạnh phần tử kích hoạt, giúp hiển thị thông tin mà không làm gián đoạn trải nghiệm người dùng.
📌 Khác biệt giữa Popovers và Tooltips:
| Thành phần | Khi nào hiển thị? | Dung lượng nội dung | Tương tác được? |
|---|---|---|---|
| Tooltip | Hover hoặc Focus | Ngắn (một dòng văn bản) | Không (chỉ hiển thị thông tin) |
| Popover | Click hoặc Hover | Dài hơn (có thể chứa văn bản, hình ảnh, nút) | Có thể chứa nút bấm hoặc form |
📌 Ứng dụng của Popovers:
✔ Hiển thị thông tin chi tiết khi nhấp vào một phần tử.
✔ Cung cấp tùy chọn hành động mà không rời khỏi màn hình chính.
✔ Giúp hiển thị nội dung hướng dẫn hoặc thông báo quan trọng.
/Các loại Popovers phổ biến
1️⃣ Basic Popover – Hiển thị nội dung cơ bản khi click vào một phần tử.
2️⃣ Interactive Popover – Có thể chứa form, button hoặc hình ảnh.
3️⃣ Confirmation Popover – Yêu cầu xác nhận trước khi thực hiện hành động.
4️⃣ Contextual Popover – Hiển thị thông tin liên quan đến ngữ cảnh.
5️⃣ Custom Styled Popover – Popover với thiết kế riêng, phù hợp với thương hiệu.
/Cấu trúc cơ bản của Popover
📌 Một Popover thường có 3 phần chính:
1️⃣ Trigger (Phần tử kích hoạt) – Nút hoặc icon mà người dùng nhấp vào để mở Popover.
2️⃣ Popover Container – Hộp hiển thị nội dung của Popover.
3️⃣ Arrow (Mũi tên chỉ hướng) – Chỉ đến phần tử kích hoạt.
/UX Best Practices cho Popovers 🎨
✅ Chỉ sử dụng Popover khi cần thiết
✔ Nếu thông tin chỉ cần hiển thị thoáng qua, hãy dùng Tooltip thay vì Popover.
✔ Nếu nội dung phức tạp, có thể sử dụng Modal thay vì Popover.
✅ Đảm bảo Popover dễ đóng
✔ Người dùng có thể click ra ngoài để đóng hoặc có nút “Close”.
✔ Không nên để Popover tự động biến mất quá nhanh, tránh ảnh hưởng UX.
✅ Hỗ trợ bàn phím & Accessibility (A11Y)
✔ Popover nên có thể mở bằng phím Enter hoặc Spacebar.
✔ Dùng aria-describedby và aria-hidden để hỗ trợ người khiếm thị.
✅ Tránh Popover chồng lên nhau
✔ Nếu một Popover đang mở, hãy đóng tất cả Popover khác để tránh rối mắt.
