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.
Popover
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.
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 positions
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.
Place popover at top start
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>
Place popover at top center
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>
Place popover at top end
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>
Place popover at end top
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>
Place popover at end center
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>
Place popover at end bottom
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>
Place popover at bottom start
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>
Place popover at bottom center
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>
Place popover at bottom end
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>
Place popover at start top
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>
Place popover at start center
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>
Place popover at start bottom
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>
Popover on table
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>