基于 Vue 实现的 tooltip 工具

[kinglisky]

嘛，基于 Vue 实现的一个 tooltip 小工具，不依赖 popper.js，支持指令注册与工具函数使用。

项目地址：https://github.com/kinglisky/vtip

文档地址： https://kinglisky.github.io/vtip

之前项目经常有碰到通过 tooltip 展示一些信息详情的需求，用了 element-ui tool-tip 组件和 Popover 弹出窗。使用方式大概像这样的：

tooltip 组件:

<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
  <el-button>上左</el-button>
</el-tooltip>

popover 弹出窗:

<el-popover
  ref="popover1"
  placement="top-start"
  title="标题"
  width="200"
  trigger="hover"
  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
</el-popover>
<el-button v-popover:popover1>hover 激活</el-button>

每次使用时即使是简单的 tooltip 提示也需要写挺多的东西的，而且对一个 tooltip 显示就需要生成一个 tooltip 实例，这样资源的消耗其实是很大的。

很多时候我们的 tooltip 只是显示一些文案提示，所以我个人会倾向于使用 vue 的指令，如：

<button v-tip.top="'执行操作的一些说明'">执行</button>

通过指令绑定一个需要提示的文案提示，鼠标 hover 上去以后直接在目标元素上方显示出文案的内容，不再需要像👆一样显式的写出组件实例。

当然有时候我们可能需要往 tooltip 塞一些自定义显示的内容或者是可交互内容，这时候指令也可提供一些自定义的配置：

 <button v-tip="tipOptions">执行</button>

computed: {
  tipOptions () {
    return {
	     width: 'auto',
         theme: 'dark',
         transition: true,
		 // 自定组件
         customComponent: Music,
		 // 组件 props 
         customProps: { id }
		 ... 其他配置****
   }
 }
}

这样使用会方便很多，嘛，其实这就是 vtip 实现的功能，而且 vtip 提供的是一个单例实现，使用 vitp 时页面只有一个 tip 单例，不会为 tip 内容再创建新的实例。

小小安利一下，欢迎来踩 https://github.com/kinglisky/vtip