介绍
Vue-tooltips 是一个可以帮助我们快速创建 tooltip（工具提示） 的 Vue 组件。
它支持多彩的提示框样式，支持自定义触发事件，支持在多种位置显示提示框等。在前端开发中，工具提示是一个常用的组件，该 npm 包对于前端开发者而言非常实用。
安装
npm install vue-tooltips --save
使用
在 main.js 中引入并注册 vue-tooltips 组件
import Vue from 'vue' import Tooltips from 'vue-tooltips' Vue.use(Tooltips)
在需要使用的组件中，使用 tooltips 组件：
<template>
<div>
<tooltips content="这是一个提示框">
我有提示框
</tooltips>
</div>
</template>以上代码将显示一个带有提示框的文本。
参数
content: 提示框内容，类型为字符串，默认为空。theme: 提示框样式，类型为字符串，可选值有 'dark'、'light'、'info'、'warning'、'error'、'success'。默认为 'dark'。position: 提示框位置，类型为字符串，可选值有 'top'、'bottom'、'left'、'right'。默认为 'top'。custom-class: 自定义样式，支持 CSS 类名和样式对象。trigger: 触发方式，类型为字符串，可选值有 'hover'、'click' 和 'focus'。默认为 'hover' 。delay: 显示延迟，类型为数字，默认为 100，单位毫秒。hide-delay: 隐藏延迟，类型为数字，默认为 100，单位毫秒。max-width: 提示框最大宽度，类型为字符串，默认为 'auto'。
示例
下面示例演示了如何使用自定义样式，如何触发 click，以及如何指定位置。
-- -------------------- ---- -------
----------
-----
---------
-----------------
--------------
--------------------
--------------------------------
---------------
------------
-----------------
-----------------
-
------
-----------
------
-----------
--------
------ ------- -
------ -
------ -
------ ----------
--------- -------
-
-
-
---------
-------
------------- -
------- --- ----- ------
-------- ----
-------------- ----
-
--------结语
Vue-tooltips 是一个非常实用的 Vue 组件，有多样的样式和位置选择，可以帮助实现工具提示，提高前端开发效率。如果你在工程中需要工具提示，不妨使用该 npm 包，它一定会给你带来意想不到的效益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ce781e8991b448da850