文本提示 Tooltip
Tooltip 用于弹出隐藏的文本提示。
目前 Popover 和 Tooltip 组件除了样式外几乎是一样的，保留两个组件是出于 UI 设计和代码后续开发的可维护性考虑。
从 UI 角度来说，Tooltip 用于只读短文本提示，Popover 承载更丰富的内容（标题、按钮、表单等）可以让用户完成轻量操作。
基础使用
Tooltip 文本提示提供 9 种展示位置。
使用 content 属性来设置显示的信息。 由 placement 属性决定弹出的位置。该属性值格式为：[方向]-[对齐位置]，分别是'top'、'right'、'bottom'、'left'、'top-start'、'top-end'、'right-start'、'right-end'、'bottom-start'、'bottom-end'、'left-start'、'left-end'，有四个展示方向，和三种对齐方式，默认的 placement 为 top。
隐藏源代码
触发方式
trigger 属性设置触发方式。
隐藏源代码
受控模式
传入 visible 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultVisible 属性作为默认值。
隐藏源代码
禁用状态
传入 disabled 设置禁用状态，禁用状态下，鼠标事件将不再影响弹出关闭。
隐藏源代码
不展示箭头
传入 arrow 设置是否展示箭头，默认为 true。
隐藏源代码
偏移距离
传入 offset 设置弹出框和触发元素之间的距离。
隐藏源代码
API
TooltipProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| content | string | 是 | | 气泡内容。 | 0.0.2 |
| visible | boolean | null | 是 | | 是否显示气泡（受控）。 | 0.0.2 |
| defaultVisible | boolean | null | 是 | | 默认是否显示气泡（非受控）。 | 0.0.2 |
| placement | 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 是 | 'top' | 气泡相对于触发元素的位置。 | 0.0.2 |
| trigger | 'hover' | 'click' | 是 | 'hover' | 触发方式。 | 0.0.2 |
| offset | number | 是 | 8 | 偏移距离，单位为像素。 | 0.0.2 |
| variant | 'dark' | 'light' | 是 | 'dark' | 气泡样式变体。 | 0.0.2 |
| arrow | boolean | 是 | true | 是否显示箭头。 | 0.0.2 |
| disabled | boolean | 是 | false | 是否禁用气泡。 | 0.0.2 |
| zIndex | number | 是 | | 气泡的 z-index。 | 0.0.2 |
| root | HTMLElement | string | 是 | 'body' | 气泡挂载的元素。 | 0.0.2 |
| destroyOnHide | boolean | 是 | false | 是否在隐藏时销毁气泡。 | 0.0.3 |
| borderRadius | number | 是 | | 圆角半径。 | 0.1.0 |
| animationDuration | number | 是 | 250 | 弹出 / 收起动画时长。 | 0.1.5 |
| cascade | boolean | 是 | false | 开启级联模式。开启了级联模式的多个嵌套 Popover 和 Tooltip 可以共存，操作打开新的浮窗不会关闭之前已存在的浮窗。该属性不具备响应式。 | 0.1.0 |
TooltipEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| update:visible | value: boolean | v-model 更新 visible 属性。 | 0.0.2 |
| close | e: MouseEvent | 气泡关闭时的回调。 | 0.0.2 |
| open | e: MouseEvent | 气泡打开时的回调。 | 0.0.2 |