<template>
    <div class="ht-base-tooltip-position-demo">
        <div class="top">
            <ht-base-tooltip content="单行文字提示" placement="top-start">
                <ht-base-button size="large">上左</ht-base-button>
            </ht-base-tooltip>
            <ht-base-tooltip content="单行文字提示" placement="top">
                <ht-base-button size="large">上中</ht-base-button>
            </ht-base-tooltip>
            <ht-base-tooltip content="单行文字提示" placement="top-end">
                <ht-base-button size="large">上右</ht-base-button>
            </ht-base-tooltip>
        </div>
        <div class="center">
            <div class="center-left">
                <ht-base-tooltip content="单行文字提示" placement="left-start">
                    <ht-base-button size="large">左上</ht-base-button>
                </ht-base-tooltip>
                <br><br>
                <ht-base-tooltip content="单行文字提示" placement="left">
                    <ht-base-button size="large">左中</ht-base-button>
                </ht-base-tooltip>
                <br><br>
                <ht-base-tooltip content="单行文字提示" placement="left-end">
                    <ht-base-button size="large">左下</ht-base-button>
                </ht-base-tooltip>
            </div>
            <div class="center-right">
                <ht-base-tooltip content="单行文字提示" placement="right-start">
                    <ht-base-button size="large">右上</ht-base-button>
                </ht-base-tooltip>
                <br><br>
                <ht-base-tooltip content="单行文字提示" placement="right">
                    <ht-base-button size="large">右中</ht-base-button>
                </ht-base-tooltip>
                <br><br>
                <ht-base-tooltip content="单行文字提示" placement="right-end">
                    <ht-base-button size="large">右下</ht-base-button>
                </ht-base-tooltip>
            </div>
        </div>
        <div class="bottom">
            <ht-base-tooltip content="Bottom Left text" placement="bottom-start">
                <ht-base-button size="large">下左</ht-base-button>
            </ht-base-tooltip>
            <ht-base-tooltip content="Bottom Center text" placement="bottom">
                <ht-base-button size="large">下中</ht-base-button>
            </ht-base-tooltip>
            <ht-base-tooltip content="Bottom Right text" placement="bottom-end">
                <ht-base-button size="large">下右</ht-base-button>
            </ht-base-tooltip>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'HtBaseTooltipPostionDemo',
    }
</script>
<style lang="less">
    .ht-base-tooltip-position-demo {
    .top, .bottom {
        text-align: center;
    }

    .center {
        width: 300px;
        margin: 10px auto;
        overflow: hidden;
    }

    .center-left {
        float: left;
    }

    .center-right {
        float: right;
    }

    }
</style>

