FxTooltip 文字提示
定位基于 @floating-ui/dom,不依赖任何 UI 框架。
基础用法
不同位置(placement)
支持 12 种位置,按钮放在其对应方位(hover 查看效果):
支持 12 种:top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end。
主题(effect)
触发方式(trigger)
hover(默认)/ click / focus / contextmenu,支持数组组合。
禁用(disabled)
自定义内容(content 插槽)
Props
显隐 / 内容
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
visible (v-model) | boolean | null | null | 显隐,null 为非受控 |
disabled | boolean | false | 是否禁用 |
content | string | '' | 文本内容,可被 content 插槽覆盖 |
rawContent | boolean | false | content 是否作为 HTML |
appendTo | string | HTMLElement | body | teleport 目标 |
定位
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
placement | Placement | 'bottom' | 位置(top/bottom/left/right ± -start/-end) |
strategy | 'absolute' | 'fixed' | 'absolute' | 定位策略 |
offset | number | 12 | 间距 |
fallbackPlacements | Placement[] | — | 翻转备选位置 |
boundariesPadding | number | 0 | 视口内边距 |
gpuAcceleration | boolean | true | 是否用 transform 定位 |
popperOptions | object | {} | 仅读取 placement/strategy,非常用 popper modifier 不全支持 |
箭头 / 延迟 / 触发
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
showArrow | boolean | true | 是否显示箭头 |
arrowOffset | number | 5 | 箭头偏移 |
showAfter | number | 0 | 显示延迟 ms |
hideAfter | number | 200 | 隐藏延迟 ms |
autoClose | number | 0 | 自动关闭延迟 ms(0 不自动关) |
trigger | 'hover'|'focus'|'click'|'contextmenu' | 数组 | 'hover' | 触发方式 |
virtualRef | Measurable | — | 虚拟触发元素 |
virtualTriggering | boolean | false | 是否启用虚拟触发 |
表现
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
effect | 'dark' | 'light' | 'dark' | 主题 |
transition | string | 'fx-tooltip-fade' | 过渡动画名 |
teleported | boolean | true | 是否 teleport |
enterable | boolean | true | hover 内容是否保持 |
persistent | boolean | false | 常驻 DOM |
popperClass | string | object | array | — | 气泡额外 class |
popperStyle | CSSProperties | — | 气泡额外 style |
zIndex | number | 自增 | z-index |
Events
| 事件 | 说明 |
|---|---|
update:visible | 显隐变化 |
before-show | 显示前 |
before-hide | 隐藏前 |
show | 显示后 |
hide | 隐藏后 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 触发器 |
content | 自定义气泡内容 |
Exposes
| 属性 | 说明 |
|---|---|
updatePopper | 更新定位 |
onOpen | 打开(带延迟) |
onClose | 关闭(带延迟) |
hide | 立即隐藏 |
