Popover

Positioned floating panel with arrow, header, close button, and multiple sizes.

Basic Popover

Preview

<div class="relative inline-block">
  <button class="btn" onclick="this.nextElementSibling.dataset.state = this.nextElementSibling.dataset.state === 'open' ? 'closed' : 'open'">Show Popover</button>
  <div class="popover popover-bottom" data-state="open" style="left: 0; top: 100%; margin-top: 12px;">
    <div class="popover-arrow"></div>
    <div class="popover-content">
      <p class="m-0">This is a popover with some helpful content. It appears next to the trigger element.</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative inline-block">
  <button class="btn">Show Popover</button>
  <div class="absolute left-0 top-full mt-3 min-w-37.5 max-w-75 bg-base-100 border border-base-300 rounded-box shadow-xl z-600 p-4 text-sm leading-relaxed">
    <div class="absolute -top-1.75 left-1/2 -ml-1.5 size-3 bg-base-100 border border-base-300 border-b-0 border-r-0 rotate-45"></div>
    <p class="m-0">This is a popover with some helpful content.</p>
  </div>
</div>

Requires: tw.min.css

// Toggle popover:
// popover.dataset.state = popover.dataset.state === 'open' ? 'closed' : 'open';
//
// Close on click outside:
// document.addEventListener('click', (e) => {
//   if (!trigger.contains(e.target) && !popover.contains(e.target)) {
//     popover.dataset.state = 'closed';
//   }
// });

With Header

Preview

<div class="relative inline-block">
  <button class="btn" onclick="this.nextElementSibling.dataset.state = this.nextElementSibling.dataset.state === 'open' ? 'closed' : 'open'">Details</button>
  <div class="popover popover-bottom" data-state="open" style="left: 0; top: 100%; margin-top: 12px;">
    <div class="popover-arrow"></div>
    <div class="popover-header">
      <h4 class="popover-title">User Info</h4>
      <button class="popover-close" onclick="this.closest('.popover').dataset.state = 'closed'">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
    </div>
    <div class="popover-content">
      <p class="m-0 mb-2"><strong>John Doe</strong></p>
      <p class="m-0 text-base-content/60">Member since 2024. Premium plan active.</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative inline-block">
  <button class="btn">Details</button>
  <div class="absolute left-0 top-full mt-3 min-w-37.5 max-w-75 bg-base-100 border border-base-300 rounded-box shadow-xl z-600 text-sm leading-relaxed">
    <div class="absolute -top-1.75 left-1/2 -ml-1.5 size-3 bg-base-100 border border-base-300 border-b-0 border-r-0 rotate-45"></div>
    <div class="flex items-center justify-between px-4 py-2 border-b border-base-300">
      <h4 class="text-sm font-semibold m-0 text-base-content">User Info</h4>
      <button class="flex items-center justify-center size-6 p-0 bg-transparent border-none cursor-pointer text-base-content/40 hover:text-base-content">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
    </div>
    <div class="p-4">
      <p class="m-0 mb-2"><strong>John Doe</strong></p>
      <p class="m-0 text-base-content/60">Member since 2024. Premium plan active.</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// Close button: popover.dataset.state = 'closed'

Arrow Positions

Preview

<div class="flex gap-8 flex-wrap items-center">
  <div class="relative">
    <div class="popover popover-top" data-state="open" style="position: relative;">
      <div class="popover-arrow"></div>
      <div class="popover-content"><p class="m-0">Top arrow</p></div>
    </div>
  </div>
  <div class="relative">
    <div class="popover popover-bottom" data-state="open" style="position: relative;">
      <div class="popover-arrow"></div>
      <div class="popover-content"><p class="m-0">Bottom arrow</p></div>
    </div>
  </div>
  <div class="relative">
    <div class="popover popover-no-arrow" data-state="open" style="position: relative;">
      <div class="popover-arrow"></div>
      <div class="popover-content"><p class="m-0">No arrow</p></div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex gap-8 flex-wrap items-center">
  <div class="relative">
    <div class="relative min-w-37.5 max-w-75 bg-base-100 border border-base-300 rounded-box shadow-xl z-600 text-sm leading-relaxed p-4">
      <div class="absolute -bottom-1.75 left-1/2 -ml-1.5 size-3 bg-base-100 border border-base-300 border-t-0 border-l-0 rotate-45"></div>
      <p class="m-0">Top arrow</p>
    </div>
  </div>
  <div class="relative">
    <div class="relative min-w-37.5 max-w-75 bg-base-100 border border-base-300 rounded-box shadow-xl z-600 text-sm leading-relaxed p-4">
      <div class="absolute -top-1.75 left-1/2 -ml-1.5 size-3 bg-base-100 border border-base-300 border-b-0 border-r-0 rotate-45"></div>
      <p class="m-0">Bottom arrow</p>
    </div>
  </div>
  <div class="relative">
    <div class="relative min-w-37.5 max-w-75 bg-base-100 border border-base-300 rounded-box shadow-xl z-600 text-sm leading-relaxed p-4">
      <p class="m-0">No arrow</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// Arrow positions: popover-top, popover-bottom, popover-left, popover-right
// Hide arrow: popover-no-arrow

Sizes

Preview

<div class="flex gap-6 flex-wrap items-start">
  <div class="popover popover-sm" data-state="open" style="position: relative;">
    <div class="popover-content"><p class="m-0">Small (200px max)</p></div>
  </div>
  <div class="popover" data-state="open" style="position: relative;">
    <div class="popover-content"><p class="m-0">Default (300px max)</p></div>
  </div>
  <div class="popover popover-lg" data-state="open" style="position: relative;">
    <div class="popover-content"><p class="m-0">Large (400px max). More room for detailed content and complex layouts.</p></div>
  </div>
</div>

Requires: ux.min.css

<div class="flex gap-6 flex-wrap items-start">
  <div class="relative min-w-25 max-w-50 bg-base-100 border border-base-300 rounded-box shadow-xl z-600 text-sm leading-relaxed p-4">
    <p class="m-0">Small (200px max)</p>
  </div>
  <div class="relative min-w-37.5 max-w-75 bg-base-100 border border-base-300 rounded-box shadow-xl z-600 text-sm leading-relaxed p-4">
    <p class="m-0">Default (300px max)</p>
  </div>
  <div class="relative min-w-62.5 max-w-100 bg-base-100 border border-base-300 rounded-box shadow-xl z-600 text-sm leading-relaxed p-4">
    <p class="m-0">Large (400px max). More room for detailed content and complex layouts.</p>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for sizes

Class	Description
`.popover`	Base floating panel
`.popover[data-state="open"]`	Visible state
`.popover-open`	Alternative open class
`.popover-arrow`	Arrow element (12px rotated square)
`.popover-top`	Arrow at bottom (popover above)
`.popover-bottom`	Arrow at top (popover below)
`.popover-left`	Arrow at right (popover left)
`.popover-right`	Arrow at left (popover right)
`.popover-no-arrow`	Hide the arrow
`.popover-content`	Content area with padding
`.popover-content-flush`	No padding (for custom content)
`.popover-header`	Header with title & close
`.popover-title`	Header title
`.popover-close`	Close button (24px)
`.popover-sm`	Small size (100-200px)
`.popover-lg`	Large size (250-400px)
`.popover-auto`	Auto size (no limits)
`.popover-dropdown`	List-style (no content padding)
`.popover-trigger`	Trigger wrapper
`.popover-backdrop`	Dismissible backdrop
`.popover.glass`	Glass morphism variant