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

---
layout: templateLayout
---
```vue
<template>
    <div class="swap">
        <div class="top">
            <Wb-button v-tooltip="option1">上左</Wb-button>
            <Wb-button v-tooltip="option2">上中</Wb-button>
            <Wb-button v-tooltip="option3">上右</Wb-button>
        </div>
        <div class="center">
            <div class="center-left">
                <Wb-button v-tooltip="option4">左上</Wb-button>
                <Wb-button v-tooltip="option5">左中</Wb-button>
                <Wb-button v-tooltip="option6">左下</Wb-button>
            </div>
            <div class="center-right">
                <Wb-button v-tooltip="option7">右上</Wb-button>
                <Wb-button v-tooltip="option8">右中</Wb-button>
                <Wb-button v-tooltip="option9">右下</Wb-button>
            </div>
        </div>
        <div class="bottom">
            <Wb-button v-tooltip="option10">下左</Wb-button>
            <Wb-button v-tooltip="option11">下中</Wb-button>
            <Wb-button v-tooltip="option12">下右</Wb-button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            option1: {
                direction: 'top',
                align: 'left',
                text: '上左'
            },
            option2: {
                direction: 'top',
                align: 'center',
                text: '上中'
            },
            option3: {
                direction: 'top',
                align: 'right',
                text: '上右'
            },
            option4: {
                direction: 'left',
                align: 'top',
                text: '左上'
            },
            option5: {
                direction: 'left',
                align: 'center',
                text: '左中'
            },
            option6: {
                direction: 'left',
                align: 'bottom',
                text: '左下'
            },
            option7: {
                direction: 'right',
                align: 'top',
                text: '右上'
            },
            option8: {
                direction: 'right',
                align: 'center',
                text: '右中'
            },
            option9: {
                direction: 'right',
                align: 'bottom',
                text: '右下'
            },
        }
    }
}
</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>
```