Skip to content

Tooltip 文字提示

常用于展示鼠标 hover 时的提示信息。

基础用法

使用 content 属性来决定 hover 时的提示信息。

<script setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue';
import Button from '@/components/Button/Button.vue';
</script>
<template>
    <div class="basic block">
        <Tooltip content="hello tooltip">
            <Button> 激活 Tooltip </Button>
        </Tooltip>
    </div>
</template>

不同位置

由 placement 属性决定展示效果: placement属性值为:[方向]-[对齐位置];四个方向:top、left、right、bottom;三种对齐位置:start, end,默认为空。

<script  setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue';
import Button from '@/components/Button/Button.vue';
</script>
<template>
    <div class="basic block">
        <Tooltip content="hello tooltip" placement="top-start">
            <Button> top-start </Button>
        </Tooltip>
        <Tooltip content="hello tooltip" placement="bottom-start">
            <Button> bottom-start </Button>
        </Tooltip>
        <Tooltip content="hello tooltip" placement="left-start">
            <Button> left-start </Button>
        </Tooltip>
        <Tooltip content="hello tooltip" placement="right-start">
            <Button> right-start </Button>
        </Tooltip>
    </div>
</template>
<style  scoped>
.sm-button {
    margin-right: 20px;
}
</style>

触发方式

由 trigger 属性决定触发方式: hover | click, 默认为 hover

<script  setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue';
import Button from '@/components/Button/Button.vue';
</script>
<template>
    <div class="basic block">
        <Tooltip content="hello tooltip" trigger="click">
            <Button> 点击激活 Tooltip </Button>
        </Tooltip>
    </div>
</template>

更多内容的文字提示

展示多行文本或者是设置文本内容的格式

用具名 slot content,替代tooltip中的content属性。

<script  setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue';
import Button from '@/components/Button/Button.vue';
</script>
<template>
    <div class="basic block">
        <Tooltip trigger="click">
            <Button> 复杂 HTML 结构的Tooltip </Button>
            <template #content>
                <h3> this is the title</h3>
                <p> this is the content </p>
            </template>
        </Tooltip>
    </div>
</template>

手动触发

manual 属性设置为 true 即可, 然后可以使用实例上面的 showhide 方法打开关闭下拉菜单。



<script  setup>
import { ref } from 'vue';
import Tooltip from '@/components/Tooltip/Tooltip.vue';
import Button from '@/components/Button/Button.vue';
const tooltipRef = ref();
const open = () => {
    tooltipRef.value?.show();
};
const close = () => {
    tooltipRef.value?.hide();
};
</script>
<template>
    <div class="basic block">
        <Tooltip content="hello tooltip" ref="tooltipRef" manual>
            <Button> 手动容器 </Button>
        </Tooltip>
        <br /><br />
        <Button type="primary" @click="open"> 点击手动触发显示 </Button>
        <Button type="danger" @click="close"> 点击手动触发隐藏 </Button>
    </div>
</template>

API

Attributes

NameDescriptionTypeDefault
contentdisplay content, can be overridden by slot#content^[string]''
placementposition of Tooltip^[enum]'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'bottom
popper-optionspopper.js parameters^[object]refer to popper.js doc{}
open-delaydelay of appearance, in millisecond^[number]0
close-delaydelay of disappear, in millisecond^[number]200
triggerHow should the tooltip be triggered (to show)^[enum]'hover' | 'click'hover
manual是否开启手动触发模式^[boolean]`false
transitiontransition name^[string]''
''

Events

NameDescriptionType
visible-change当 tooltip 展示/隐藏时被触发boolean
click-outside当点击到 Tooltip 外侧区域时被触发boolean

Slots

NameDescription
defaultTooltip triggering & reference element
contentcustomize content

Exposes

NameDescriptionType
showexpose show function^[Function](event?: Event | undefined) => void
hideexpose hide function^[Function](event?: Event | undefined) => void