Tooltip | DuskMoon Elements

The Tooltip component displays additional information when users hover over or focus on an element.

Installation

npm install @duskmoon-dev/el-tooltip

Usage

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

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

Live Demo

Tooltip Positions

Top

Bottom

Left

Right

Properties

Property	Type	Default	Description
`content`	`string`	-	Tooltip text content
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Tooltip position
`trigger`	`'hover' \| 'click' \| 'focus'`	`'hover'`	How to trigger the tooltip
`delay`	`number`	`0`	Show delay in milliseconds
`arrow`	`boolean`	`true`	Show tooltip arrow
`disabled`	`boolean`	`false`	Disable the tooltip

Positions

Tooltip Positions

Top

Bottom

Left

Right

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

Trigger Modes

Hover

Click

Focus

<el-dm-tooltip content="Hover to show" trigger="hover">
  <button>Hover</button>
</el-dm-tooltip>
<el-dm-tooltip content="Click to show" trigger="click">
  <button>Click</button>
</el-dm-tooltip>

With Delay

Delayed Tooltip

Delayed tooltip

<el-dm-tooltip content="Appears after 500ms" delay="500">
  <button>Delayed tooltip</button>
</el-dm-tooltip>

Without Arrow

No Arrow

No arrow

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

Slots

Slot	Description
default	The trigger element

CSS Parts

Part	Description
`tooltip`	The tooltip wrapper
`content`	The tooltip content
`arrow`	The tooltip arrow

Accessibility

Uses role="tooltip" for proper semantics
Triggered by focus as well as hover
Content is accessible to screen readers