文字提示

基础文字提示

<template>
    <div class="demo-tooltip-container">
        <t-tooltip
            class="demo-tooltip-placement top center"
            content="文字提示仅展示文本内容文字提示仅展示文本内容"
            placement="top"
            :overlay-style="{ width: '200px' }"
            show-arrow
        >
            <t-button variant="outline" style="width: 80px"> top </t-button>
        </t-tooltip>
        <t-tooltip
            class="demo-tooltip-placement top left"
            content="文字提示仅展示文本内容文字提示仅展示文本内容"
            placement="top-left"
            :overlay-style="{ width: '200px' }"
        show-arrow
        >
            <t-button variant="outline"> top-left </t-button>
        </t-tooltip>
        <t-tooltip
            class="demo-tooltip-placement top right"
            content="文字提示仅展示文本内容文字提示仅展示文本内容"
            :overlay-style="{ width: '200px' }"
            placement="top-right"
            show-arrow
        >
            <t-button variant="outline"> top-right </t-button>
        </t-tooltip>
        <t-tooltip
            class="demo-tooltip-placement bottom center"
            content="文字提示仅展示文本内容文字提示仅展示文本内容"
            :overlay-style="{ width: '200px' }"
            placement="bottom"
            show-arrow
        >
            <t-button variant="outline" style="width: 80px"> bottom </t-button>
        </t-tooltip>
        <t-tooltip
            class="demo-tooltip-placement bottom left"
            content="文字提示仅展示文本内容文字提示仅展示文本内容"
            placement="bottom-left"
            :overlay-style="{ width: '200px' }"
            show-arrow
        >
            <t-button variant="outline"> bottom-left </t-button>
        </t-tooltip>
        <t-tooltip
            class="demo-tooltip-placement bottom right"
            content="文字提示仅展示文本内容文字提示仅展示文本内容"
            :overlay-style="{ width: '200px' }"
            placement="bottom-right"
            show-arrow
        >
            <t-button variant="outline"> bottom-right </t-button>
        </t-tooltip>
        <t-tooltip
            class="demo-tooltip-placement align"
            content="文字提示仅展示文本内容文字提示仅展示文本内容"
            :overlay-style="{ width: '200px' }"
            placement="left"
            show-arrow
        >
            <t-button variant="outline"> left </t-button>
        </t-tooltip>
        <t-tooltip
            class="demo-tooltip-placement top-align"
            content="文字提示仅展示文本内容文字提示仅展示文本内容"
            :overlay-style="{ width: '200px' }"
            placement="left-top"
            show-arrow
        >
            <t-button variant="outline"> left-top </t-button>
        </t-tooltip>
        <t-tooltip
            class="demo-tooltip-placement bottom-align"
            content="文字提示仅展示文本内容文字提示仅展示文本内容"
            :overlay-style="{ width: '200px' }"
            placement="left-bottom"
            show-arrow
        >
            <t-button variant="outline"> left-bottom </t-button>
        </t-tooltip>
        <t-tooltip
            class="demo-tooltip-placement right-full align"
            content="文字提示仅展示文本内容文字提示仅展示文本内容"
            :overlay-style="{ width: '200px' }"
            placement="right"
            show-arrow
        >
            <t-button variant="outline"> right </t-button>
        </t-tooltip>
        <t-tooltip
            class="demo-tooltip-placement right-full top-align"
            content="文字提示仅展示文本内容文字提示仅展示文本内容"
            :overlay-style="{ width: '200px' }"
            placement="right-top"
            show-arrow
        >
            <t-button variant="outline"> right-top </t-button>
        </t-tooltip>
        <t-tooltip
            class="demo-tooltip-placement right-full bottom-align"
            content="文字提示仅展示文本内容文字提示仅展示文本内容"
            :overlay-style="{ width: '200px' }"
            placement="right-bottom"
            show-arrow
        >
            <t-button variant="outline"> right-bottom </t-button>
        </t-tooltip>
    </div>
</template>
<script></script>
<style lang="less" scoped>
.demo-tooltip-container {
    margin: 0 auto;
    width: 500px;
    height: 260px;
    position: relative;
}
.demo-tooltip-placement {
  position: absolute;
  &.top {
    top: 0;
  }
  &.center {
    left: 42%;
  }
  &.left {
    left: 70px;
  }
  &.right {
    right: 70px;
  }
  &.bottom {
    bottom: 0;
  }
  &.align {
    top: 42%;
  }
  &.top-align {
    top: 50px;
  }
  &.bottom-align {
    bottom: 50px;
  }
  &.right-full {
    right: 0px;
  }
}
</style>

显示代码 复制代码 复制代码

不带箭头的文字提示

<template>
    <div>
        <t-tooltip content="文字提示仅展示文本内容" :showArrow=false>
            <t-button variant="outline">不带箭头的文字提示</t-button>
        </t-tooltip>
    </div>
</template>

显示代码 复制代码 复制代码

带主题色的文字提示

<template>
    <div class="demo-tooltip-column">
        <t-tooltip content="文字提示仅展示文本内容">
            <t-button theme='default'>default</t-button>
        </t-tooltip>
        <t-tooltip content="文字提示仅展示文本内容" theme="primary">
            <t-button theme='primary'>primary</t-button>
        </t-tooltip>
        <t-tooltip content="文字提示仅展示文本内容" theme="success">
            <t-button theme='success'>success</t-button>
        </t-tooltip>
        <t-tooltip content="文字提示仅展示文本内容" theme="danger">
            <t-button theme='danger'>danger</t-button>
        </t-tooltip>
        <t-tooltip content="文字提示仅展示文本内容" theme="warning">
            <t-button theme='warning'>warning</t-button>
        </t-tooltip>
        <t-tooltip content="文字提示仅展示文本内容" theme="light">
            <t-button variant="outline">light</t-button>
        </t-tooltip>
    </div>
</template>

显示代码 复制代码 复制代码