Skip to content

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 | nullnull显隐,null 为非受控
disabledbooleanfalse是否禁用
contentstring''文本内容,可被 content 插槽覆盖
rawContentbooleanfalsecontent 是否作为 HTML
appendTostring | HTMLElementbodyteleport 目标

定位

属性类型默认值说明
placementPlacement'bottom'位置(top/bottom/left/right ± -start/-end)
strategy'absolute' | 'fixed''absolute'定位策略
offsetnumber12间距
fallbackPlacementsPlacement[]翻转备选位置
boundariesPaddingnumber0视口内边距
gpuAccelerationbooleantrue是否用 transform 定位
popperOptionsobject{}仅读取 placement/strategy,非常用 popper modifier 不全支持

箭头 / 延迟 / 触发

属性类型默认值说明
showArrowbooleantrue是否显示箭头
arrowOffsetnumber5箭头偏移
showAfternumber0显示延迟 ms
hideAfternumber200隐藏延迟 ms
autoClosenumber0自动关闭延迟 ms(0 不自动关)
trigger'hover'|'focus'|'click'|'contextmenu' | 数组'hover'触发方式
virtualRefMeasurable虚拟触发元素
virtualTriggeringbooleanfalse是否启用虚拟触发

表现

属性类型默认值说明
effect'dark' | 'light''dark'主题
transitionstring'fx-tooltip-fade'过渡动画名
teleportedbooleantrue是否 teleport
enterablebooleantruehover 内容是否保持
persistentbooleanfalse常驻 DOM
popperClassstring | object | array气泡额外 class
popperStyleCSSProperties气泡额外 style
zIndexnumber自增z-index

Events

事件说明
update:visible显隐变化
before-show显示前
before-hide隐藏前
show显示后
hide隐藏后

Slots

插槽名说明
default触发器
content自定义气泡内容

Exposes

属性说明
updatePopper更新定位
onOpen打开(带延迟)
onClose关闭(带延迟)
hide立即隐藏