vue-directive-tooltip 提示框的簡單使用

c_qinghuan發表於2021-04-22
Vue

一、安裝

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 協議》，轉載必須註明作者和本文連結

相關文章