Tooltip 文字提示

简单的文字提示气泡框

何时使用

鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。可用来代替系统默认的 title 提示，提供一个按钮/文字/操作的文案解释。

代码演示

基本

最简单的用法

<v-tooltip content="提示文本">
    <span>鼠标一上来就会出现</span>
</v-tooltip>

位置

位置有 12 个方向。

<template>
    <div class="box">
        <div class="top">
            <v-tooltip placement="topLeft" controlled>
                <v-button>上左</v-button>
                <template slot="content">
                    <p>topLeft 文字提示</p>
                    <p>topLeft 文字提示</p>
                    <p>topLeft 文字提示</p>
                </template>
            </v-tooltip>
            <v-tooltip content="top 文字提示,初始可见" placement="top" init-visible>
                <v-button>上边</v-button>
            </v-tooltip>
            <v-tooltip content="topRight 不可用tooltip" placement="topRight" disabled>
                <v-button>上右</v-button>
            </v-tooltip>
        </div>
        <div class="left">
            <v-tooltip content="leftTop 文字提示" placement="leftTop" @hide="popperHide">
                <v-button>左上</v-button>
            </v-tooltip>
            <v-tooltip content="left 文字提示" placement="left">
                <v-button>左边</v-button>
            </v-tooltip>
            <v-tooltip content="leftBottom 文字提示" placement="leftBottom">
                <v-button>左下</v-button>
            </v-tooltip>
        </div>
        <div class="right">
            <v-tooltip content="rightTop 文字提示" placement="rightTop">
                <v-button>右上</v-button>
            </v-tooltip>
            <v-tooltip content="right 文字提示" placement="right">
                <v-button>右边</v-button>
            </v-tooltip>
            <v-tooltip content="rightBottom 文字提示" placement="rightBottom">
                <v-button>右下</v-button>
            </v-tooltip>
        </div>
        <div class="bottom">
            <v-tooltip content="bottomLeft 文字提示" placement="bottomLeft">
                <v-button>下左</v-button>
            </v-tooltip>
            <v-tooltip content="bottom 文字提示" placement="bottom">
                <v-button>下边</v-button>
            </v-tooltip>
            <v-tooltip content="bottomRight 文字提示" placement="bottomRight">
                <v-button>下右</v-button>
                <div slot="content">
                    <span style="color:#AAA">自定义提示内容</span>
                <div>
            </v-tooltip>
        </div>
    </div>
</template>
<script>
export default {
    methods: {
        popperHide() {
            console.log('tooltip hide');
        }
    }
  }
</script>
<style scoped>
    .box {
        width: 500px;
    }
    .top {
        margin-left: 125px;
    }
    .left {
        float: left;
        width: 60px;
    }
    .right {
        width: 60px; 
        margin-left: 380px;
    }
    .bottom {
        clear: both;
        margin-left: 125px;
    }
    .box-demo .ant-tooltip-wrapper {
        margin-right: 8px;
        margin-bottom: 8px;
    }
</style>