--- 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/id/components/popover --- # Popover Component Komponen popover menampilkan konten kontekstual yang berdekatan dengan elemen pemicu tanpa menempati ruang layar permanen. Dibangun di atas HTML Popover API asli, sistem popover Frutjam mendukung pemicu klik dan hover, pemosisian yang dapat disesuaikan, dan animasi yang halus. Sempurna untuk menu tarik-turun, menu konteks, menu profil pengguna, dan opsi tambahan tanpa navigasi halaman. Khusus CSS, tidak memerlukan JavaScript — buat menu tarik-turun yang dapat diakses dan hamparan kontekstual dengan HTMX murni dan Tailwind CSS. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun. | Kelas | Jenis | Keterangan | | --------------------- | -------- | ------------------------------------------------------ | | popover | Basis | Pembungkus yang menyatukan pemicu dan konten | | popover-content | Pengubah | Panel mengambang ditampilkan saat popover terbuka | | popover-toggle | Pengubah | Elemen pemicu yang membuka/menutup popover | | popover-hover | Pengubah | Terbuka saat diarahkan, bukan diklik | | popover-top-start | Pengubah | Diposisikan di atas, sejajar dengan awal | | popover-top-center | Pengubah | Diposisikan di atas, di tengah | | popover-top-end | Pengubah | Diposisikan di atas, sejajar sampai akhir | | popover-bottom-start | Pengubah | Diposisikan di bawah, sejajar dengan awal | | popover-bottom-center | Pengubah | Diposisikan di bawah, di tengah | | popover-bottom-end | Pengubah | Diposisikan di bawah, sejajar sampai akhir | | popover-start-top | Pengubah | Posisinya ke kiri, sejajar ke atas | | popover-start-center | Pengubah | Diposisikan ke kiri, terpusat secara vertikal | | popover-start-bottom | Pengubah | Posisinya ke kiri, sejajar ke bawah | | popover-end-top | Pengubah | Posisinya di sebelah kanan, sejajar ke atas | | popover-end-center | Pengubah | Diposisikan ke kanan, terpusat secara vertikal | | popover-end-bottom | Pengubah | Letaknya di sebelah kanan, sejajar dengan bagian bawah | ## Penggunaan Dasar ## Menu Tarik-turun Gunakan komponen Popover untuk membuat menu tarik-turun — tarik-turun navigasi, menu profil pengguna, dan menu tindakan — semuanya hanya CSS tanpa memerlukan JavaScript. ### Tarik-turun Bilah Nav ### Dropdown Profil Pengguna ### Dropdown dengan Ikon ## Perilaku Interaksi Popover Secara default, interaksi klik digunakan untuk membuka dan menutup komponen popover. Untuk megamenu, misalnya, Anda dapat mengaktifkan interaksi berbasis hover dengan menambahkan kelas `popover-hover` dan menghapus atribut `popovertarget` dan `popover`. Hal ini memungkinkan popover dikontrol sepenuhnya melalui logika hover, bukan melalui perilaku klik asli. ### Pemicu Klik Asli ```html
``` ### Logika Interaksi Arahkan kursor ```html
``` ## Opsi Pemosisian Popover (Atas, Bawah, Mulai, Akhir) Posisikan popover Anda relatif terhadap elemen pemicunya menggunakan logika penempatan fleksibel kami. Penempatan popover dibuat dengan menggabungkan opsi perataan vertikal (atas, tengah, bawah) dan horizontal (awal, tengah, akhir). ### Posisi Popover Awal Teratas ```html
``` ### Posisi Popover Tengah Atas ```html
``` ### Posisi Popover Ujung Atas ```html
``` ### Posisi Popover Akhir-Atas ```html
``` ### Posisi Popover Tengah Akhir ```html
``` ### Posisi Popover Akhir-Bawah ```html
``` ### Posisi Popover Mulai Bawah ```html
``` ### Posisi Popover Tengah Bawah ```html
``` ### Posisi Popover Ujung Bawah ```html
``` ### Posisi Popover Mulai-Atas ```html
``` ### Posisi Popover Mulai-Pusat ```html
``` ### Posisi Popover Mulai-Bawah ```html
``` ## Menggunakan Popovers Inside Data Tables (Menu Tindakan dan Konfirmasi) ```html
Project Category Primary Tech
E-commerce Dashboard
Internal Tool
 Full Stack Admin Panel Next.js
  • Are you sure? delete this record!
CI Pipeline
Infrastructure
 DevOps Automation GitHub Actions
Project Category Primary Tech
```