Tooltip 文字提示

常用于展示鼠标 hover 时的提示信息。

基础用法

在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。

Tooltip 文字提示 - 图1

主题

Tooltip 组件提供了两个不同的主题：dark和light。

Tooltip 文字提示 - 图2

更多 Content

展示多行文本或者是设置文本内容的格式

Tooltip 文字提示 - 图3

高级扩展

除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：transition属性可以定制显隐的动画效果，默认为fade-in-linear。如果需要关闭tooltip功能，disabled属性可以满足这个需求，它接受一个Boolean，设置为true即可。

Tooltip 文字提示 - 图4

Attributes

参数说明类型可选值默认值
effect默认提供的主题Stringdark, lightdark
content显示的内容String/Node——
placementTooltip 的出现位置Stringtop, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-endbottom
visible状态是否可见Boolean—false
disabledTooltip 是否可用Boolean—false
transition定义渐变动画String—fade-in-linear
visibleArrow是否显示 Tooltip 箭头Boolean—true
openDelay延迟出现，单位毫秒Number—0
manual手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效Booleantrue,falsefalse