---
title: "Popover"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS popover and dropdown menu. Native HTML Popover API, navbar dropdowns, profile menus — no JavaScript. WCAG accessible, Django, HTMX, Larave"
url: https://frutjam.com/vi/components/popover
---

# Popover Component

Các thành phần Popover hiển thị nội dung theo ngữ cảnh liền kề với các thành phần kích hoạt mà không chiếm không gian màn hình cố định. Được xây dựng trên API HTML Popover gốc, hệ thống cửa sổ bật lên Frutjam hỗ trợ trình kích hoạt nhấp chuột và di chuột, định vị có thể tùy chỉnh và hoạt ảnh mượt mà. Hoàn hảo cho menu thả xuống, menu ngữ cảnh, menu hồ sơ người dùng và các tùy chọn bổ sung mà không cần điều hướng trang.

Chỉ CSS, không cần JavaScript — xây dựng các menu thả xuống có thể truy cập và lớp phủ theo ngữ cảnh bằng HTML thuần túy và CSS Tailwind. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học               | Kiểu            | Sự miêu tả                                                 |
| --------------------- | --------------- | ---------------------------------------------------------- |
| popover               | Căn cứ          | Trình bao bọc gắn kết trình kích hoạt và nội dung với nhau |
| popover-content       | Công cụ sửa đổi | Bảng nổi hiển thị khi cửa sổ bật lên được mở               |
| popover-toggle        | Công cụ sửa đổi | Phần tử kích hoạt mở/đóng cửa sổ bật lên                   |
| popover-hover         | Công cụ sửa đổi | Mở khi di chuột thay vì nhấp chuột                         |
| popover-top-start     | Công cụ sửa đổi | Được định vị ở trên, căn chỉnh về điểm bắt đầu             |
| popover-top-center    | Công cụ sửa đổi | Nằm ở trên, ở giữa                                         |
| popover-top-end       | Công cụ sửa đổi | Được định vị phía trên, căn chỉnh về cuối                  |
| popover-bottom-start  | Công cụ sửa đổi | Được định vị bên dưới, căn chỉnh về đầu                    |
| popover-bottom-center | Công cụ sửa đổi | Đặt ở phía dưới, ở giữa                                    |
| popover-bottom-end    | Công cụ sửa đổi | Được định vị bên dưới, căn chỉnh về cuối                   |
| popover-start-top     | Công cụ sửa đổi | Được đặt ở bên trái, căn chỉnh lên trên cùng               |
| popover-start-center  | Công cụ sửa đổi | Vị trí ở bên trái, căn giữa theo chiều dọc                 |
| popover-start-bottom  | Công cụ sửa đổi | Vị trí ở bên trái, căn chỉnh ở phía dưới                   |
| popover-end-top       | Công cụ sửa đổi | Được đặt ở bên phải, căn chỉnh lên trên cùng               |
| popover-end-center    | Công cụ sửa đổi | Đặt ở bên phải, căn giữa theo chiều dọc                    |
| popover-end-bottom    | Công cụ sửa đổi | Vị trí ở bên phải, căn chỉnh ở phía dưới                   |

## Cách sử dụng cơ bản

## Menu thả xuống

Sử dụng thành phần Popover để xây dựng các menu thả xuống — menu thả xuống điều hướng, menu hồ sơ người dùng và menu hành động — tất cả chỉ có CSS ​​mà không cần JavaScript.

### Thanh điều hướng thả xuống

### Danh sách thả xuống hồ sơ người dùng

### Thả xuống với các biểu tượng

## Hành vi tương tác Popover

Theo mặc định, tương tác nhấp chuột được sử dụng để mở và đóng thành phần cửa sổ bật lên. Ví dụ: đối với megamenus, bạn có thể kích hoạt tương tác dựa trên di chuột bằng cách thêm lớp `popover-hover` và xóa các thuộc tính `popovertarget` và `popover`. Điều này cho phép cửa sổ bật lên được kiểm soát hoàn toàn thông qua logic di chuột thay vì hành vi nhấp chuột gốc.

### Trình kích hoạt nhấp chuột gốc

```html
<div class="popover">
  <button popovertarget="nativeClickTrigger" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="nativeClickTrigger">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

### Logic tương tác di chuột

```html
<div class="popover popover-hover">
  <button type="button" class="popover-toggle btn">Hover me</button>
  <div class="popover-content">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

## Tùy chọn định vị cửa sổ bật lên (Trên cùng, Dưới cùng, Bắt đầu, Kết thúc)

Định vị cửa sổ bật lên của bạn so với các phần tử kích hoạt bằng cách sử dụng logic vị trí linh hoạt của chúng tôi. Vị trí cửa sổ bật lên được tạo bằng cách kết hợp các tùy chọn căn chỉnh dọc (trên cùng, giữa, dưới cùng) và ngang (bắt đầu, giữa, cuối).

### Vị trí Popover khởi đầu hàng đầu

```html
<div class="popover popover-top-start">
  <button popovertarget="popoverTopStart" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverTopStart">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

### Vị trí bật lên ở giữa hàng đầu

```html
<div class="popover popover-top-center">
  <button popovertarget="popoverTopCenter" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverTopCenter">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

### Vị trí Popover cao cấp nhất

```html
<div class="popover popover-top-end">
  <button popovertarget="popoverTopEnd" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverTopEnd">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

### Vị trí bật lên cuối cùng

```html
<div class="popover popover-end-top">
  <button popovertarget="popoverEndTop" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverEndTop">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

### Vị trí bật lên ở giữa cuối

```html
<div class="popover popover-end-center">
  <button popovertarget="popoverEndCenter" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverEndCenter">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

### Vị trí bật lên cuối-dưới

```html
<div class="popover popover-end-bottom">
  <button popovertarget="popoverEndBottom" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverEndBottom">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

### Vị trí bật lên bắt đầu từ dưới cùng

```html
<div class="popover popover-bottom-start">
  <button popovertarget="popoverBottomStart" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverBottomStart">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

### Vị trí Popover ở giữa dưới cùng

```html
<div class="popover popover-bottom-center">
  <button popovertarget="popoverBottomCenter" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverBottomCenter">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

### Vị trí Popover cuối cùng

```html
<div class="popover popover-bottom-end">
  <button popovertarget="popoverBottomEnd" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverBottomEnd">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

### Vị trí bật lên đầu tiên

```html
<div class="popover popover-start-top">
  <button popovertarget="popoverStartTop" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverStartTop">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

### Vị trí bật lên ở trung tâm bắt đầu

```html
<div class="popover popover-start-center">
  <button popovertarget="popoverStartCenter" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverStartCenter">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

### Vị trí bật lên từ đầu đến cuối

```html
<div class="popover popover-start-bottom">
  <button popovertarget="popoverStartBottom" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverStartBottom">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>
```

## Sử dụng Popovers bên trong bảng dữ liệu (Menu hành động và xác nhận)

```html
<div class="overflow-x-auto w-full">
  <table class="table">
    <!-- head -->
    <thead>
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <th>Project</th>
        <th>Category</th>
        <th>Primary Tech</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <td>
          <div>
            <div class="font-bold">E-commerce Dashboard</div>
            <div class="text-sm opacity-50">Internal Tool</div>
          </div>
        </td>
        <td>
          Full Stack

          <span class="badge badge-soft badge-sm">Admin Panel</span>
        </td>
        <td>Next.js</td>
        <th>
          <div class="popover popover-bottom-start">
            <button popovertarget="popoverOnTable" type="button"
              class="popover-toggle btn btn-xs btn-error">Delete</button>
            <div tabindex="0" class="popover-content" popover id="popoverOnTable">
              <ul class="menu menu-horizontal">
                <li class="menu-title">Are you sure? delete this record!</li>
                <li>
                  <button class="btn btn-xs">No</button>
                </li>
                <li>
                  <button class="btn btn-xs btn-error">Delete</button>
                </li>
              </ul>
            </div>
          </div>
        </th>
      </tr>
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <td>
          <div>
            <div class="font-bold">CI Pipeline</div>
            <div class="text-sm opacity-50">Infrastructure</div>
          </div>
        </td>
        <td>
          DevOps

          <span class="badge badge-soft badge-sm">Automation</span>
        </td>
        <td>GitHub Actions</td>
        <th>
          <div class="popover popover-bottom-start">
            <button popovertarget="popoverOnTable2" type="button"
              class="popover-toggle btn btn-xs btn-error">Delete</button>
            <div tabindex="0" class="popover-content" popover id="popoverOnTable2">
              <ul class="menu menu-horizontal">
                <li>
                  <button class="menu-item btn btn-xs">No</button>
                </li>
                <li>
                  <button class="menu-item btn btn-xs btn-error">Delete</button>
                </li>
              </ul>
            </div>
          </div>
        </th>
      </tr>
    </tbody>

    <!-- foot -->
    <tfoot>
      <tr>
        <th></th>
        <th>Project</th>
        <th>Category</th>
        <th>Primary Tech</th>
        <th></th>
      </tr>
    </tfoot>
  </table>
</div>
```