Tooltip 文字提示

简单的文字提示气泡,支持多个方向、触发方式、自定义颜色和箭头。

基础用法
鼠标悬停时显示提示文字。
不同方向
通过 placement 设置弹出方向,支持 12 个位置。
点击触发
设置 trigger 为 click,点击触发显示,再次点击或点击外部关闭。
自定义颜色
通过 color 设置背景色,textColor 设置文字颜色。
隐藏箭头
设置 arrow 为 false 隐藏箭头。
延迟显示
通过 show-delay 和 hide-delay 控制显示/隐藏的延迟时间(毫秒)。
带图标触发
结合 NIcon 组件作为触发元素。
禁用状态
设置 disabled 后不显示提示。
偏移距离
通过 offset 控制提示框与触发元素的距离,默认 8px。

Props

参数类型默认值说明
placement'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end''top'提示框出现的位置
trigger'hover' | 'click''hover'触发方式
colorstring背景颜色
textColorstring文字颜色
arrowbooleantrue是否显示箭头
disabledbooleanfalse是否禁用
showDelaynumber0显示延迟(ms)
hideDelaynumber100隐藏延迟(ms)
offsetnumber8与触发元素的间距(px)

Events

事件名类型说明
show() => void提示框显示时触发
hide() => void提示框隐藏时触发

Slots

插槽名说明
default提示内容
trigger触发元素