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

# Popover Component

Popover bileşenleri, kalıcı ekran alanını işgal etmeden, tetikleyici öğelerin yanında bağlamsal içeriği görüntüler. Yerel HTML Popover API'sini temel alan Frutjam popover sistemi, tıklama ve vurgulu tetikleyicileri, özelleştirilebilir konumlandırmayı ve pürüzsüz animasyonları destekler. Açılır menüler, içerik menüleri, kullanıcı profili menüleri ve sayfada gezinmeye gerek olmayan ek seçenekler için mükemmeldir.

Yalnızca CSS, JavaScript gerekmez; saf HTML ve Tailwind CSS ile erişilebilir açılır menüler ve bağlamsal katmanlar oluşturun. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf                 | Tip         | Tanım                                                |
| --------------------- | ----------- | ---------------------------------------------------- |
| popover               | Temel       | Tetikleyiciyi ve içeriği bir arada tutan sarmalayıcı |
| popover-content       | Değiştirici | Popover açıkken gösterilen kayan panel               |
| popover-toggle        | Değiştirici | Açılır pencereyi açan/kapatan tetikleyici öğe        |
| popover-hover         | Değiştirici | Tıklama yerine fareyle üzerine gelindiğinde açılır   |
| popover-top-start     | Değiştirici | Yukarıda konumlandırılmış, başlangıca hizalanmış     |
| popover-top-center    | Değiştirici | Yukarıda konumlandırılmış, ortalanmış                |
| popover-top-end       | Değiştirici | Yukarıya konumlandırılmış, uca hizalanmış            |
| popover-bottom-start  | Değiştirici | Aşağıya konumlandırılmış, başlangıca hizalanmış      |
| popover-bottom-center | Değiştirici | Aşağıda konumlandırılmış, ortalanmış                 |
| popover-bottom-end    | Değiştirici | Aşağıya konumlandırılmış, uca hizalanmış             |
| popover-start-top     | Değiştirici | Sola konumlandırılmış, üste hizalanmış               |
| popover-start-center  | Değiştirici | Sola konumlandırılmış, dikey olarak ortalanmış       |
| popover-start-bottom  | Değiştirici | Sola konumlandırılmış, alta hizalanmış               |
| popover-end-top       | Değiştirici | Sağa konumlandırılmış, üste hizalanmış               |
| popover-end-center    | Değiştirici | Sağa konumlandırılmış, dikey olarak ortalanmış       |
| popover-end-bottom    | Değiştirici | Sağa konumlandırılmış, alta hizalanmış               |

## Temel Kullanım

## Açılır Menü

JavaScript gerektirmeden tamamı yalnızca CSS'den oluşan açılır menüler (gezinme açılır menüleri, kullanıcı profili menüleri ve eylem menüleri) oluşturmak için Popover bileşenini kullanın.

### Gezinme Çubuğu Açılır Menüsü

### Kullanıcı Profili Açılır Menüsü

### Simgelerin Bulunduğu Açılır Menü

## Popover Etkileşim Davranışı

Varsayılan olarak, açılır pencere bileşenini açmak ve kapatmak için tıklama etkileşimleri kullanılır. Örneğin mega menüler için, `popover-hover` sınıfını ekleyip `popovertarget` ve `popover` niteliklerini kaldırarak fareyle üzerine gelme tabanlı etkileşimi etkinleştirebilirsiniz. Bu, açılır pencerenin yerel tıklama davranışı yerine fareyle üzerine gelme mantığı aracılığıyla tamamen kontrol edilmesine olanak tanır.

### Yerel Tıklama Tetikleyicisi

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

### Vurgulu Etkileşim Mantığı

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

## Popover Konumlandırma Seçenekleri (Üst, Alt, Başlangıç, Bitiş)

Esnek yerleştirme mantığımızı kullanarak açılır pencerelerinizi tetikleyici öğelerine göre konumlandırın. Açılır pencere yerleşimi, dikey (üst, orta, alt) ve yatay (başlangıç, orta, bitiş) hizalama seçeneklerinin birleştirilmesiyle oluşturulur.

### Üstten Başlangıç ​​Popover Konumu

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

### Üst-Orta Popover Konumu

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

### Üst Uç Popover Konumu

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

### Uç-Üst Popover Konumu

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

### Merkez Sonu Açılma Konumu

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

### Uç-Alt Popover Konumu

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

### Alttan Başlangıç ​​Popover Konumu

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

### Alt-Orta Popover Konumu

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

### Alt Uç Popover Konumu

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

### Başlangıç-Üst Popover Konumu

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

### Başlangıç ​​Merkezi Açılır Konumu

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

### Başlangıç-Alt Popover Konumu

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

## Veri Tablolarındaki Popover'ları Kullanma (Eylem Menüleri ve Onaylar)

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