@ draggable/ 工具提示
一个智能工具提示库,可以自动将工具提示最优化地定位在取景口内.
安装
npm install @draggable/tooltip
使用量
import { Tooltip } from '@draggable/tooltip';
// Initialize with default options
const tooltip = new Tooltip();
// Or with custom options
const tooltip = new Tooltip({
triggerName: 'custom-tooltip'
});
注意: 当使用 umd 或 iffe 时, 工具提示可以通过 window.SmartTooltip
## HTML Usage
Add tooltips to any element using data attributes:
```html
<!-- Hover tooltip (default) -->
<div data-tooltip="This is a tooltip">Hover me</div>
<!-- Click tooltip -->
<button data-tooltip="Click tooltip" data-tooltip-type="click">Click me</button>
选项
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 触发Name | 字符串 | "工具点" | 用于数据属性触发器的名称( 如 “ tabletip ” 变为 “ data- tabletip ” ) |
特征
- QQ 智能定位: 自动找到显示工具提示的最佳位置
- QQ 多重触发类型: 既支持悬浮也支持点击触发
- QQ 响应: 在取景口调整大小并滚动上自动重新定位
- QQ 自定义: 易于样式和配置
- 8道定位:上、下、左、右和角位置
职位
工具提示会试图按以下顺序定位自己,选择与取景口相适应的第一个位置:
- 顶端
- 下边
- 左边
- 对
- 左上边
- 右上边
- 左下边
- 右下边
触发类型
Hover 触发器
<div data-tooltip="Hover tooltip">Hover me</div>
点击触发
<div data-tooltip="Click tooltip" data-tooltip-type="click">Click me</div>
清理
// Remove event listeners and cleanup
tooltip.destroy();