@duskmoon-dev/el-tooltip

A hover tooltip component built with Web Components.

Installation

bun add @duskmoon-dev/el-tooltip

Usage

Auto-Register

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

<el-dm-tooltip content="Helpful information">
  <button>Hover me</button>
</el-dm-tooltip>

Manual Registration

import { ElDmTooltip, register } from '@duskmoon-dev/el-tooltip';

// Register with default tag name
register();

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

Positions

| Position | Description | |----------|-------------| | top | Above the element (default) | | bottom | Below the element | | left | Left of the element | | right | Right of the element |

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | content | string | '' | Tooltip text | | position | string | 'top' | Position: top, bottom, left, right | | trigger | string | 'hover' | Trigger: hover, click, focus | | delay | number | 0 | Show delay in ms | | arrow | boolean | true | Show arrow | | disabled | boolean | false | Disable the tooltip |

CSS Parts

| Part | Description | |------|-------------| | tooltip | The tooltip container | | content | The tooltip content | | arrow | The arrow element |

Examples

Basic

<el-dm-tooltip content="This is a tooltip">
  <button>Hover me</button>
</el-dm-tooltip>

Positions

<el-dm-tooltip content="Top tooltip" position="top">
  <button>Top</button>
</el-dm-tooltip>

<el-dm-tooltip content="Bottom tooltip" position="bottom">
  <button>Bottom</button>
</el-dm-tooltip>

<el-dm-tooltip content="Left tooltip" position="left">
  <button>Left</button>
</el-dm-tooltip>

<el-dm-tooltip content="Right tooltip" position="right">
  <button>Right</button>
</el-dm-tooltip>

With Delay

<el-dm-tooltip content="Delayed tooltip" delay="500">
  <button>Hover (500ms delay)</button>
</el-dm-tooltip>

Click Trigger

<el-dm-tooltip content="Click triggered" trigger="click">
  <button>Click me</button>
</el-dm-tooltip>

No Arrow

<el-dm-tooltip content="No arrow" arrow="false">
  <button>No arrow</button>
</el-dm-tooltip>

On Icons

<el-dm-tooltip content="Edit item">
  <button>✏️</button>
</el-dm-tooltip>

<el-dm-tooltip content="Delete item">
  <button>🗑️</button>
</el-dm-tooltip>

License

MIT