Popover

A flexible popover component with 8 positioning options, smooth animations, backdrop blur, and comprehensive dark mode support. Perfect for tooltips, menus, and contextual actions.

Basic Usage

Popovers are triggered by clicking a button or element. The content appears with a smooth animation and backdrop blur effect. Use the popover class on the container and position classes to control placement.

<div class="popover bottom-center">
  <button class="btn btn-secondary btn-sm">Click for popover</button>
  <div class="popover-content">
    <div class="popover-header">
      <h3>Actions</h3>
    </div>
    <div class="popover-list">
      <button class="popover-item">
        <span>✏️</span>
        Edit
      </button>
      <button class="popover-item">
        <span>📋</span>
        Copy
      </button>
      <div class="popover-divider"></div>
      <button class="popover-item item-danger">
        <span>🗑️</span>
        Delete
      </button>
    </div>
  </div>
</div>

Popover Structure

Every popover consists of three main parts:

.popover — Root container with positioning class
Trigger element — Any clickable element (button, icon, etc.)
.popover-content — The animated content panel

Positioning Options

Solora provides 8 positioning options. The popover automatically adjusts if there's not enough space in the preferred direction.

Trigger buttons

<!-- Top positions -->
<div class="popover top-left">...</div>
<div class="popover top-center">...</div>
<div class="popover top-right">...</div>

<!-- Side positions -->
<div class="popover left">...</div>
<div class="popover right">...</div>

<!-- Bottom positions -->
<div class="popover bottom-left">...</div>
<div class="popover bottom-center">...</div>
<div class="popover bottom-right">...</div>

Backdrop Blur Effect

Popovers use backdrop-filter: blur(12px) for a modern glassmorphism effect. This creates visual depth and elegance while maintaining readability.

💡 Progressive enhancement The popover works perfectly even in browsers that don't support backdrop-filter. The blur is a visual enhancement, not a requirement for functionality.

Animations

Popovers animate in smoothly using opacity, scale, and transform properties with a cubic-bezier easing function for natural motion.

/* Animation on enter */
.popover.open .popover-content {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Animation on exit */
.popover-content {
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  pointer-events: none;
}

Popover Header

Use .popover-header for section titles. Headers have uppercase text, reduced opacity, and a subtle bottom border.

Popover Items

Items are styled buttons with hover effects. Use item-danger for destructive actions like delete or remove.

<!-- Regular item -->
<button class="popover-item">
  <span>📝</span>
  Edit document
</button>

<!-- Danger item -->
<button class="popover-item item-danger">
  <span>🗑️</span>
  Delete permanently
</button>

Dividers

Use .popover-divider to separate logical groups of items.

Scrollable Content

Popovers automatically scroll when content exceeds the viewport height. Custom scrollbar styling matches the theme.

Width Classes

Control popover width with utility classes:

<!-- Width utilities -->
<div class="popover bottom-center sol-pop-w-16">  <!-- 4rem -->
<div class="popover bottom-center sol-pop-w-32">  <!-- 8rem -->
<div class="popover bottom-center sol-pop-w-64">  <!-- 16rem -->

Initialisation

// Popovers are automatically initialized with initAll()
// No manual initialization needed!

import('@kerkhoff-ict/solora/dist/index.js')
  .then(sol => sol.initAll());

Manual Control

You can manually control popover state with JavaScript:

// Open a specific popover
const popover = document.querySelector('.popover');
popover.classList.add('open');

// Close all popovers
document.querySelectorAll('.popover.open').forEach(p => {
  p.classList.remove('open');
});

// Toggle popover
const popover2 = document.querySelector('.popover');
popover2.classList.toggle('open');

Dark Mode

Popovers automatically adapt to dark mode with glassmorphism effects and appropriate color adjustments.

Toggle to dark mode to see the glassmorphism effect.

CSS Classes Reference

Class	Type	Description
`.popover`	Container	Root wrapper element
`.popover-content`	Panel	The animated content container
`.popover.open`	State	Shows the popover (applied by JS)
`.popover-header`	Header	Optional header with title
`.popover-list`	Container	Flex container for items
`.popover-item`	Item	Individual clickable item
`.item-danger`	Modifier	Red styling for destructive actions
`.popover-divider`	Divider	Horizontal separator line
`.sol-pop-w-16`	Width	4rem width
`.sol-pop-w-32`	Width	8rem width
`.sol-pop-w-64`	Width	16rem width

Positioning Classes

Class	Position	Description
`.top-left`	Above, left-aligned	Popover appears above trigger, aligned to left
`.top-center`	Above, centered	Popover appears above trigger, centered
`.top-right`	Above, right-aligned	Popover appears above trigger, aligned to right
`.bottom-left`	Below, left-aligned	Popover appears below trigger, aligned to left
`.bottom-center`	Below, centered	Popover appears below trigger, centered
`.bottom-right`	Below, right-aligned	Popover appears below trigger, aligned to right
`.left`	Left, centered	Popover appears to the left, vertically centered
`.right`	Right, centered	Popover appears to the right, vertically centered

Accessibility

♿ Best practices

Popovers should be triggered by button elements, not divs
Use aria-label on trigger buttons for screen readers
Popovers close when clicking outside or pressing Escape
Focus is managed automatically - popover items are keyboard navigable
Use semantic icons and clear text labels for items

Common Use Cases

🎯 Perfect for

Context menus (right-click alternatives)
Action buttons with multiple options
Info tooltips with interactive content
User account menus
Settings panels
Share menus

Performance Tips

⚡ Optimization

Backdrop blur is GPU-accelerated but avoid excessive blur values
Lazy initialize popovers if you have many on a page
Use position: fixed for better performance in scrollable containers