Sadrazam – Popover Showcase

Placement Positions

The placement option accepts top, right, bottom (default), or left. The popover auto-flips when it overflows the viewport.

new Sadrazam.Popover({
  referenceElement: document.querySelector('#pop-top'),
  placement: 'top',
  title: 'Top Popover',
  content: () => 'This popover appears above the button.'
});

Trigger Types

The trigger option controls which DOM event opens the popover. Mutual events are handled automatically: mouseover pairs with mouseout, and focus pairs with blur.

// Hover trigger — auto-hides on mouseout
new Sadrazam.Popover({
  referenceElement: document.querySelector('#trig-hover'),
  trigger: 'mouseover',
  content: () => 'Appears on hover, hides on mouseout.'
});

Title and Content

Set the optional title property to render a styled header bar. The content function can return an HTML string or an HTMLElement.

new Sadrazam.Popover({
  referenceElement: document.querySelector('#pop-titled'),
  placement: 'right',
  title: 'Notification',
  content: () => 'You have 3 unread messages.'
});

Static Listen Method

Popover.listen() attaches a one-time event listener. The popover is created lazily on the first trigger event, via { once: true }. Subsequent toggles use the live instance.

The first click creates the popover instance. After that, it toggles normally on each click.

Sadrazam.Popover.listen({
  selector: '#pop-listen',
  trigger: 'click',
  placement: 'bottom',
  title: 'Lazy Popover',
  content: () => 'Created on first click via Popover.listen().'
});

Programmatic Control

The Popover instance exposes .show(), .hide(), .toggle(), and .destroy() methods for full programmatic control. The instance is also stored on the element as el.__popover.

const pop = new Sadrazam.Popover({
  referenceElement: el,
  placement: 'right',
  title: 'Controlled',
  content: () => 'Use the buttons below to control me.'
});

pop.show();   // fade in
pop.hide();   // fade out
pop.toggle(); // show or hide
pop.destroy(); // destroy and detach observer

Custom HTML Content

The content callback receives the generated popoverId as its argument and can return either an HTML string or an HTMLElement instance.

new Sadrazam.Popover({
  referenceElement: el,
  title: 'User Profile',
  content: (popoverId) => `
    <div style="line-height:1.6">
      <strong>John Doe</strong><br>
      <small>john@example.com</small>
    </div>`
});

Auto-Flip Behavior

When a popover would overflow the viewport, the placement automatically flips to the opposite side. Try the buttons near the page edges.

The component checks document.documentElement.clientWidth and clientHeight to determine if a flip is needed. The arrow position is also recalculated to stay aligned with the reference element.

Mutation Observer Integration

Each popover instance creates a MutationObserver that watches for DOM changes. If the reference element is removed from the DOM, the popover automatically cleans itself up. If a parent is hidden, the popover hides too.

Click "Open Popover", then click "Remove Button from DOM" to see the popover auto-destruct when its reference element is removed.

// Internally, the observer watches document.body:
// - childList: true (detect element removal)
// - subtree, attributes: true (detect style/class hide)
// When the reference element disappears, popover.destroy() is called.

API Reference

Quick reference for all configuration options and methods

---

---