一、安装

npm install vue-directive-tooltip –save

二、引用

在main.js内全局引用

复制
import Tooltip from 'vue-directive-tooltip';
import 'vue-directive-tooltip/dist/vueDirectiveTooltip.css';
Vue.use(Tooltip）

在vue文件内使用

复制
<span v-tooltip.top="'v-tooltip'">ToolTip</span>

显示如下：

三、自定义

更改弹出位置

复制
<span v-tooltip.top="'我在顶部'">Tooltip</span> // 从span顶部弹出，不加则默认为auto

自定义属性

复制
Vue.use(Tooltip, {
    delay: 500,
    placement: 'right',class: 'tooltip-custom',
    triggers: ['hover'],
    offset: 0
});

自定义CSS样式

在全局css文件中定义类，进行样式自定义，我们将类名定义为tooltip-custom

复制
.vue-tooltip.tooltip-custom {/* 这里进行父元素样式更改 */ 
}
.vue-tooltip.tooltip-custom .tooltip-arrow {/* 下方的小三角形 */ 
}
.vue-tooltip.tooltip-custom .tooltip-content {/* 矩形内容区域 */ 
}