主题
tooltips 气泡框
使用
import { KTooltips } from "@ksware/ksw-ux";常用于展示鼠标 hover 时的提示信息。
基础用法
在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。
使用 content 属性来决定 hover 时的提示信息。 由 placement 属性决定展示效果： placement属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。 如 placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
自定义颜色
使用color属性来自定义气泡框的颜色, 使用textColor属性来自定义提示信息的颜色。
主题
Tooltip 组件内置了两个主题：dark和light。
TIP
暂不支持自定义主题
通过设置 effect 来修改主题，默认值为 dark.
更多内容的文字提示
展示多行文本或者是设置文本内容的格式
用具名 slot content，替代tooltip中的content属性。
高级扩展
除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：
transition 属性可以定制显隐的动画效果，默认为fade-in-linear。
如果需要关闭 tooltip 功能，disabled 属性可以满足这个需求， 你只需要将其设置为 true。
事实上，Tooltip 是一个基于 KPopper 的扩展，您可以使用 KPopper 中允许的任何属性。
TIP
Tooltip 内不支持 router-link 组件，请使用 vm.$router.push 代替。
tooltip 内不支持 disabled form 元素，参考 MDN， 请在 disabled form 元素外层添加一层包裹元素。
显示 HTML 内容
内容属性可以设置为 HTML 字符串。
WARNING
content 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致XSS 攻击。 因此在 raw-content 打开的情况下，请确保 content 的内容是可信的，永远不要将用户提交的内容赋值给 content 属性。
虚拟触发
有时候我们想把 tooltip 的触发元素放在别的地方，而不需要写在一起，这时候就可以使用虚拟触发。
TIP
需要注意的是，虚拟触发的 tooltip 是受控组件，因此你必须自己去控制 tooltip 是否显示，你将无法通过点击空白处来关闭 tooltip。
单例模式
Tooltip 可以作为单例，也就是是说你可以同时有多个触发同一个 tooltip 的触发元素，这个功能是在 虚拟触发 的基础上开发的。
TIP
已知问题：使用单例模式时，弹出窗口会从意料之外的位置弹出。
受控模式
Tooltip 可以通过父组件使用 :visible 来控制它的显示与关闭。
自定义动画
Tooltip 可以自定义动画，你可以根据需要自行设置所需的动画方法。
API
Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| type | tooltip 类型 | enum | - |
| effect | Tooltip 主题，内置了 dark / light 两种，未设置 type 或 color 属性时生效 | enum | 'dark' |
| content | tooltip 内容 | string | - |
| raw-content | content 中的内容是否作为 HTML 字符串处理 | boolean | false |
| placement | tooltip 位置 | enum | 'bottom' |
| fallback-placements | Tooltip 可用的 positions 请查看 popper.js 文档 | array | - |
| visible/v-model:visible | tooltip 是否可见 | boolean | '' |
| disabled | tooltip 是否禁用 | boolean | false |
| offset | tooltip 位置偏移量 | number | 12 |
| transition | 动画名称 | string | - |
| popper-options | Tooltip 可用的 positions 请查看 popper.js 参数 | object | {} |
| show-after | tooltip 显示延迟时间，单位为毫秒 | number | 0 |
| hide-after | tooltip 隐藏延迟时间，单位为毫秒 | number | 200 |
| show-arrow | 是否显示箭头 | boolean | true |
| auto-close | tooltip 出现后自动隐藏延时，单位毫秒 | number | 0 |
| color | tooltip 填充色 | string | - |
| text-color | tooltip 文字颜色 | string | - |
| popper-style | popper 样式 | object | - |
| popper-class | popper 类名 | string | '' |
| enterable | 鼠标是否可进入到 tooltip 中 | boolean | true |
| teleported | 是否使用 teleport。设置成 true 则会被追加到 append-to 的位置 | boolean | true |
| trigger | 触发方式 | enum | 'hover' |
| virtual-triggering | 是否使用虚拟触发 | boolean | false |
| virtual-ref | 虚拟触发的元素 | HTMLElement | - |
| trigger-keys | 当鼠标点击或者聚焦在触发元素上时， 可以定义一组键盘按键并且通过它们来控制 Tooltip 的显示 | array | ['Enter','Space'] |
| persistent | 当 tooltip 组件长时间不触发且 persistent 属性设置为 false 时, popconfirm 将会被删除 | boolean | - |
| aria-label | 和 aria-label 属性保持一致 | string | - |
Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | Tooltip触发 & 引用的元素 | - |
| content | 自定义内容 | - |
Methods
| 方法名 | 描述 | 类型 |
|---|---|---|
| popperRef | element-plus 的 el-popper 组件实例 | object |
| contentRef | element-plus 的 el-tooltip-content 组件实例 | object |
| isFocusInsideContent | 验证当前焦点事件是否在 el-tooltip-content 中触发 | Function |
| updatePopper | 更新 el-popper 组件实例 | Function |
| onOpen | 控制 tooltip 显示状态 | Function |
| onClose | 控制 tooltip 显示状态 | Function |
| hide | 隐藏 tooltip | Function |