Tooltip 文字提示
常用于展示鼠标 hover 时的提示信息。
基础用法
在这里我们提供 9 种不同方向的展示方式,可以通过以下完整示例来理解,选择你要的效果。
主题
Tooltip 组件内置了两个主题:dark
和light
。
更多内容的文字提示
展示多行文本或者是设置文本内容的格式
API
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
content | 显示的内容,也可被 slot#content 覆盖 | string | '' |
placement | Tooltip 组件出现的位置 | enum 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | bottom |
disabled | Tooltip 组件是否禁用 | boolean | — |
offset | 出现位置的偏移量 | number | 12 |
trigger | 如何触发 Tooltip | enum 'hover' | 'click' | 'focus' | 'contextmenu' | hover |
Slots
插槽名 | 说明 |
---|---|
default | Tooltip 触发 & 引用的元素 |
content | 自定义内容 |