由 Web 组件构建的悬浮工具提示组件 .
安装
bun add @duskmoon-dev/el-tooltip
使用量
自动注册
import '@duskmoon-dev/el-tooltip/register';
<el-dm-tooltip content="Helpful information">
<button>Hover me</button>
</el-dm-tooltip>
手工登记
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);
职位
| 职位 | 说明 |
|---|
top | 在元素上方( 默认) |
bottom | 元素下方 |
left | 元素左侧 |
right | 要件的权利 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
content | string | '' | 工具提示文本 |
position | string | 'top' | 位置 : top, (中文(简体) ), bottom, (中文(简体) ), left, (中文(简体) ), right |
trigger | string | 'hover' | 触发 : hover, (中文(简体) ), click, (中文(简体) ), focus |
delay | number | 0 | 显示延迟 MS |
arrow | boolean | true | 显示箭头 |
disabled | boolean | false | 禁用工具提示 |
CSS 组件
| 编 | 说明 |
|---|
tooltip | 工具提示容器 |
content | 工具提示内容 |
arrow | 箭头元素 |
实例
基础
<el-dm-tooltip content="This is a tooltip">
<button>Hover me</button>
</el-dm-tooltip>
职位
<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>
有延迟
<el-dm-tooltip content="Delayed tooltip" delay="500">
<button>Hover (500ms delay)</button>
</el-dm-tooltip>
点击触发
<el-dm-tooltip content="Click triggered" trigger="click">
<button>Click me</button>
</el-dm-tooltip>
无箭头
<el-dm-tooltip content="No arrow" arrow="false">
<button>No arrow</button>
</el-dm-tooltip>
在图标上
<el-dm-tooltip content="Edit item">
<button>✏️</button>
</el-dm-tooltip>
<el-dm-tooltip content="Delete item">
<button>🗑️</button>
</el-dm-tooltip>
许可证
麻省理工学院