Tooltip 文字提示
常用于展示鼠标 hover 时的提示信息。
基础用法
在这里我们提供 9 种不同方向的展示方式,可以通过以下完整示例来理解,选择你要的效果。
主题
Tooltip 组件内置了两个主题:dark和light。
更多内容的文字提示
展示多行文本或者是设置文本内容的格式
组件参数
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 | 自定义内容 |