Tailwind CSS Popover Component
Explore a variety of interactive popover examples, from dropdown to mega menus. Fully responsive, highly customizable, and supports both hover and click behavior to display rich content in a floating overlay.
Basic Usage
html
<div class="popover">
<button popovertarget="defaultClickPopover" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" popover id="defaultClickPopover">
<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 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
<div class="popover">
<button popovertarget="nativeClickTrigger" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>Hover Interaction Logic
html
<div class="popover popover-hover">
<button type="button" class="popover-toggle btn">Hover me</button>
<div class="popover-body">
<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 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
<div class="popover popover-top-start">
<button popovertarget="popoverTopStart" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>Top-Center Popover Position
html
<div class="popover popover-top-center">
<button popovertarget="popoverTopCenter" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>Top-End Popover Position
html
<div class="popover popover-top-end">
<button popovertarget="popoverTopEnd" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>End-Top Popover Position
html
<div class="popover popover-end-top">
<button popovertarget="popoverEndTop" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>End-Center Popover Position
html
<div class="popover popover-end-center">
<button popovertarget="popoverEndCenter" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>End-Bottom Popover Position
html
<div class="popover popover-end-bottom">
<button popovertarget="popoverEndBottom" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>Bottom-Start Popover Position
html
<div class="popover popover-bottom-start">
<button popovertarget="popoverBottomStart" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>Bottom-Center Popover Position
html
<div class="popover popover-bottom-center">
<button popovertarget="popoverBottomCenter" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>Bottom-End Popover Position
html
<div class="popover popover-bottom-end">
<button popovertarget="popoverBottomEnd" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>Start-Top Popover Position
html
<div class="popover popover-start-top">
<button popovertarget="popoverStartTop" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>Start-Center Popover Position
html
<div class="popover popover-start-center">
<button popovertarget="popoverStartCenter" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>Start-Bottom Popover Position
html
<div class="popover popover-start-bottom">
<button popovertarget="popoverStartBottom" type="button" class="popover-toggle btn">Click here</button>
<div tabindex="0" class="popover-body" 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>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 |
| |
CI Pipeline Infrastructure | DevOps Automation | GitHub Actions | ||
| Project | Category | Primary Tech |
<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-body" popover id="popoverOnTable">
<ul class="menu menu-x">
<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-body" popover id="popoverOnTable2">
<ul class="menu menu-x">
<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>