--- title: "Popover" type: component version: "2.0.4" doc_version: "2.0.4" status: stable date: 2026-02-22 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Tailwind CSS Popover for contextual overlays, dropdown menus, and rich tooltips. Multiple trigger positions with accessible, theme-aware content panels." url: https://frutjam.com/components/popover --- # Popover Component Popover components display contextual content adjacent to trigger elements without occupying permanent screen space. Built on the native HTML Popover API, the Frutjam popover system supports click and hover triggers, customizable positioning, and smooth animations. Perfect for dropdown menus, user profiles, and additional options without page navigation. | Class | Type | Description | | --------------------- | -------- | ------------------------------------------------- | | popover | Base | Wrapper that anchors trigger and content together | | popover-content | Modifier | Floating panel shown when the popover is open | | popover-toggle | Modifier | Trigger element that opens/closes the popover | | popover-hover | Modifier | Opens on hover instead of click | | popover-top-start | Modifier | Positioned above, aligned to the start | | popover-top-center | Modifier | Positioned above, centered | | popover-top-end | Modifier | Positioned above, aligned to the end | | popover-bottom-start | Modifier | Positioned below, aligned to the start | | popover-bottom-center | Modifier | Positioned below, centered | | popover-bottom-end | Modifier | Positioned below, aligned to the end | | popover-start-top | Modifier | Positioned to the left, aligned to the top | | popover-start-center | Modifier | Positioned to the left, vertically centered | | popover-start-bottom | Modifier | Positioned to the left, aligned to the bottom | | popover-end-top | Modifier | Positioned to the right, aligned to the top | | popover-end-center | Modifier | Positioned to the right, vertically centered | | popover-end-bottom | Modifier | Positioned to the right, aligned to the bottom | ## Basic Usage ## Popover Interaction Behavior By default, click interactions are used to open and close the popover component. For megamenus, for instance, you can enable hover-based interaction by adding the `popover-hover` class and removing the `popovertarget` and `popover` attributes. This allows the popover to be fully controlled via hover logic rather than the native click behavior. ### Native Click Trigger ```html
``` ### Hover Interaction Logic ```html
``` ## Popover Positioning Options (Top, Bottom, Start, End) Position your popovers relative to their trigger elements using our flexible placement logic. Popover placement is created by combining vertical (top, center, bottom) and horizontal (start, center, end) alignment options. ### Top-Start Popover Position ```html
``` ### Top-Center Popover Position ```html
``` ### Top-End Popover Position ```html
``` ### End-Top Popover Position ```html
``` ### End-Center Popover Position ```html
``` ### End-Bottom Popover Position ```html
``` ### Bottom-Start Popover Position ```html
``` ### Bottom-Center Popover Position ```html
``` ### Bottom-End Popover Position ```html
``` ### Start-Top Popover Position ```html
``` ### Start-Center Popover Position ```html
``` ### Start-Bottom Popover Position ```html
``` ## Using Popovers Inside Data Tables (Action Menus and Confirmations) ```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
```