vue-directive-tooltip 提示框的简单使用

一、安装

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>

显示如下:

vue-directive-tooltip 提示框的简单使用

三、自定义

更改弹出位置

<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 {
    /* 矩形内容区域 */
}
本作品采用《CC 协议》,转载必须注明作者和本文链接
清欢
讨论数量: 1

其中,offset为弹出框相对于覆盖元素的偏移量

2年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!