Popover | DuskMoon Elements

The Popover component provides a contextual overlay that appears relative to a trigger element. It supports multiple trigger modes (click, hover, focus), flexible placement options, and auto-flipping when near viewport edges.

Installation

npm install @duskmoon-dev/el-popover

Usage

import '@duskmoon-dev/el-popover/register';

<el-dm-popover>
  <el-dm-button slot="trigger">Click me</el-dm-button>
  <p>Popover content goes here.</p>
</el-dm-popover>

Live Demo

Popover Demo

Click for Popover

This is a popover with default settings. Click outside to close.

Trigger Modes

Click Trigger (Default)

Click Trigger

Click the button to toggle this popover.

Hover Trigger

Hover over the button to show this popover.

Focus Trigger

Focus the button (tab or click) to show this popover.

Placement Options

Placement Variants

Top

Placement: top

Bottom

Placement: bottom

Left

Placement: left

Right

Placement: right

Aligned Placements

Top Start

Aligned to start

Top End

Aligned to end

Bottom Start

Aligned to start

Bottom End

Aligned to end

Arrow Option

With and Without Arrow

With Arrow

This popover has an arrow pointing to the trigger.

No Arrow

This popover has no arrow.

Properties

Property	Type	Default	Description
`open`	`boolean`	`false`	Whether the popover is visible
`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual'`	`'click'`	Trigger mode
`placement`	`string`	`'bottom'`	Popover position relative to trigger
`offset`	`number`	`8`	Distance from trigger element in pixels
`arrow`	`boolean`	`true`	Whether to show arrow pointing to trigger

Placement Values

top, top-start, top-end
bottom, bottom-start, bottom-end
left, left-start, left-end
right, right-start, right-end

Methods

Method	Description
`show()`	Shows the popover
`hide()`	Hides the popover
`toggle()`	Toggles the popover visibility

Slots

Slot	Description
`trigger`	The element that triggers the popover
default	Popover content

Events

Event	Description
`open`	Fired when popover opens
`close`	Fired when popover closes

Event Handling

const popover = document.querySelector('el-dm-popover');
popover.addEventListener('open', () => {
  console.log('Popover opened');
});
popover.addEventListener('close', () => {
  console.log('Popover closed');
});

CSS Parts

Part	Description
`popover`	The popover container
`content`	The popover content area
`arrow`	The popover arrow

Programmatic Control

const popover = document.querySelector('el-dm-popover');

// Manual trigger mode
popover.trigger = 'manual';

// Show/hide programmatically
popover.show();
popover.hide();
popover.toggle();

Accessibility

Uses role="dialog" for the popover content
Escape key closes the popover
Focus management for focus trigger mode
Click outside closes click-triggered popovers
Auto-flip prevents popover from going off-screen