---
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/pl/components/popover
---

# Popover Component

Komponenty Popover wyświetlają treść kontekstową obok elementów wyzwalających, nie zajmując stałego miejsca na ekranie. Zbudowany w oparciu o natywny interfejs API HTML Popover, system popover Frutjam obsługuje wyzwalacze kliknięcia i najechania myszką, konfigurowalne pozycjonowanie i płynne animacje. Idealny do menu rozwijanych, menu kontekstowych, menu profilu użytkownika i dodatkowych opcji bez nawigacji po stronie.

Tylko CSS, nie wymaga JavaScript — twórz dostępne menu rozwijane i nakładki kontekstowe za pomocą czystego HTMX i CSS Tailwind. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa                 | Typ         | Opis                                                     |
| --------------------- | ----------- | -------------------------------------------------------- |
| popover               | Opierać     | Opakowanie, które zakotwicza wyzwalacz i zawartość razem |
| popover-content       | Modyfikator | Pływający panel wyświetlany, gdy popover jest otwarty    |
| popover-toggle        | Modyfikator | Element wyzwalający otwierający/zamykający popover       |
| popover-hover         | Modyfikator | Otwiera się po najechaniu myszką zamiast kliknięcia      |
| popover-top-start     | Modyfikator | Umieszczony powyżej, wyrównany do początku               |
| popover-top-center    | Modyfikator | Umieszczone powyżej, centralnie                          |
| popover-top-end       | Modyfikator | Umieszczone powyżej, wyrównane do końca                  |
| popover-bottom-start  | Modyfikator | Umieszczony poniżej, wyrównany do początku               |
| popover-bottom-center | Modyfikator | Umieszczony poniżej, wyśrodkowany                        |
| popover-bottom-end    | Modyfikator | Umieszczony poniżej, wyrównany do końca                  |
| popover-start-top     | Modyfikator | Umieszczony po lewej stronie, wyrównany do góry          |
| popover-start-center  | Modyfikator | Umieszczony po lewej stronie, wyśrodkowany w pionie      |
| popover-start-bottom  | Modyfikator | Umieszczony po lewej stronie, wyrównany do dołu          |
| popover-end-top       | Modyfikator | Umieszczony po prawej stronie, wyrównany do góry         |
| popover-end-center    | Modyfikator | Umieszczony po prawej stronie, wyśrodkowany w pionie     |
| popover-end-bottom    | Modyfikator | Umieszczony po prawej stronie, wyrównany do dołu         |

## Podstawowe użycie

## Menu rozwijane

Użyj komponentu Popover do tworzenia menu rozwijanych — menu nawigacji, menu profilu użytkownika i menu akcji — a wszystko to wyłącznie w formacie CSS, bez konieczności używania JavaScript.

### Lista rozwijana paska nawigacyjnego

### Lista rozwijana profilu użytkownika

### Lista rozwijana z ikonami

## Zachowanie interakcji popover

Domyślnie interakcje kliknięcia służą do otwierania i zamykania komponentu popover. Na przykład w przypadku megamenu możesz włączyć interakcję po najechaniu myszką, dodając klasę `popover-hover` i usuwając atrybuty `popovertarget` i `popover`. Umożliwia to pełną kontrolę nad wyskakującym okienkiem za pomocą logiki najechania kursorem, a nie natywnego zachowania kliknięcia.

### Natywny wyzwalacz kliknięcia

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

### Logika interakcji kursora

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

## Opcje pozycjonowania wyskakującego okienka (góra, dół, początek, koniec)

Ustaw swoje wyskakujące okienka względem ich elementów wyzwalających, korzystając z naszej elastycznej logiki rozmieszczania. Umiejscowienie wyskakującego okienka tworzy się poprzez połączenie opcji wyrównania w pionie (góra, środek, dół) i poziomie (początek, środek, koniec).

### Pozycja wyskakująca od góry

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

### Górna, środkowa pozycja wyskakującego okienka

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

### Najwyższa pozycja wyskakująca

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

### Końcowa górna pozycja wyskakującego okienka

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

### Środkowa pozycja wyskakującego końca

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

### Końcowa dolna pozycja wyskakującego okienka

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

### Pozycja wyskakująca od dołu do góry

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

### Dolna i środkowa pozycja wyskakującego okienka

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

### Dolna pozycja wyskakującego okienka

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

### Początkowa górna pozycja wyskakującego okienka

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

### Pozycja wyskakująca w centrum startowym

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

### Początkowa-dolna pozycja wyskakującego okienka

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

## Korzystanie z wyskakujących okienek w tabelach danych (menu akcji i potwierdzenia)

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