@duskmoon-dev/el-popover

A floating content popover component built with Web Components.

Installation

bun add @duskmoon-dev/el-popover

Usage

Auto-Register

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

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

Manual Registration

import { ElDmPopover, register } from '@duskmoon-dev/el-popover';

// Register with default tag name
register();

// Or register with custom tag name
customElements.define('my-popover', ElDmPopover);

Placements

| Placement | Description | |-----------|-------------| | top | Above the trigger | | bottom | Below the trigger (default) | | left | Left of the trigger | | right | Right of the trigger | | top-start | Above, aligned to start | | top-end | Above, aligned to end | | bottom-start | Below, aligned to start | | bottom-end | Below, aligned to end |

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | open | boolean | false | Whether the popover is open | | trigger | string | 'click' | Trigger: click, hover, focus | | placement | string | 'bottom' | Popover placement | | offset | number | 8 | Distance from trigger | | arrow | boolean | true | Show arrow |

Slots

| Slot | Description | |------|-------------| | trigger | The trigger element | | (default) | Popover content |

CSS Parts

| Part | Description | |------|-------------| | popover | The popover container | | content | The content wrapper | | arrow | The arrow element |

Events

| Event | Detail | Description | |-------|--------|-------------| | open | - | Fired when popover opens | | close | - | Fired when popover closes |

Examples

Basic

<el-dm-popover>
  <button slot="trigger">Open Popover</button>
  <div>
    <h4>Popover Title</h4>
    <p>Some popover content here.</p>
  </div>
</el-dm-popover>

Placements

<el-dm-popover placement="top">
  <button slot="trigger">Top</button>
  <div>Top popover</div>
</el-dm-popover>

<el-dm-popover placement="right">
  <button slot="trigger">Right</button>
  <div>Right popover</div>
</el-dm-popover>

Hover Trigger

<el-dm-popover trigger="hover">
  <span slot="trigger">Hover me</span>
  <div>This appears on hover</div>
</el-dm-popover>

Focus Trigger

<el-dm-popover trigger="focus">
  <input slot="trigger" placeholder="Focus me" />
  <div>Help text appears on focus</div>
</el-dm-popover>

No Arrow

<el-dm-popover arrow="false">
  <button slot="trigger">No arrow</button>
  <div>Popover without arrow</div>
</el-dm-popover>

Programmatic Control

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

// Open
popover.open = true;

// Close
popover.open = false;

License

MIT