Tooltip 文字提示

简单的文字提示气泡框

何时使用

鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。

代码演示

基本

最简单的用法

<template>
    <div class="box">
        <div class="top">
            <v-button v-tooltip.topleft='msg'>上左</v-button>
            <v-button v-tooltip.top='msg'>上边</v-button>
            <v-button v-tooltip.topright='msg'>上右</v-button>
        </div>
        <div class="left">
            <v-button v-tooltip.lefttop='msg'>左上</v-button>
            <v-button v-tooltip.left='msg'>左边</v-button>
            <v-button v-tooltip.leftbottom='msg'>左下</v-button>
        </div>
        <div class="right">
            <v-button v-tooltip.righttop='msg'>右上</v-button>
            <v-button v-tooltip.right='msg'>右边</v-button>
            <v-button v-tooltip.rightbottom='msg'>右下</v-button>
        </div>
        <div class="bottom">
            <v-button v-tooltip.bottomleft='msg'>下左</v-button>
            <v-button v-tooltip.bottom='msg'>下边</v-button>
            <v-button v-tooltip.bottomright='msg'>下右</v-button>
        </div>
    </div>
</template>
<script>
    export default{
        data :function(){
            return {
                msg: '<em>hello world</em>',
            }
        }
    }
</script>

保持tooltip的显示

通过controlled来控制tooltip是否保持显示

<template>
    <v-button v-tooltip.topleft='msg2'>不保持显示</v-button>
    <v-button v-tooltip.top.controlled='msg3'>保持显示</v-button>
</template>
<script>
    export default{
        data :function(){
            return {
                msg2: '不保持显示',
                msg3: '保持显示',
            }
        }
    }
</script>

API

tooltip 指令说明