fes.js/packages/fes-doc/docs/ui/templates/tooltip/5.md

---
layout: templateLayout
---
```vue
<template>
    <span v-tooltip="option14">当鼠标经过这段文字时，会显示一个内容是组件的气泡框</span>
</template>
<script>
import Vue from "vue"
export default {
    data(){
        return {
            option14: {
                direction: 'bottom',
                align: 'left',
                component: new Vue({
                    data: function () {
                        return {
                            a: '组件'
                        }
                    },
                    render(h){
                        return h("Wb-button", {}, [`我是${this.a}`])
                    }
                })
            },
        }
    }
}
</script>
<style lang="scss">
.swap{
    width: 500px;
    text-align: center;
    .top,
    .center,
    .bottom {
        width: 100%;
    }
    .center {
        padding: 0px 50px;
        height: 170px;
        .ui-button {
            margin-top: 20px;
        }
    }
    .center-left {
        float: left;
        width: 100px;
        height: 170px;
    }
    .center-right {
        float: right;
        width: 100px;
        height: 170px;
    }
}
</style>
</style>
```