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 即可, 然后可以使用实例上面的 show
和 hide
方法打开关闭下拉菜单。
<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
Name | Description | Type | Default |
---|---|---|---|
content | display content, can be overridden by slot#content | ^[string] | '' |
placement | position 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-options | popper.js parameters | ^[object]refer to popper.js doc | {} |
open-delay | delay of appearance, in millisecond | ^[number] | 0 |
close-delay | delay of disappear, in millisecond | ^[number] | 200 |
trigger | How should the tooltip be triggered (to show) | ^[enum]'hover' | 'click' | hover |
manual | 是否开启手动触发模式 | ^[boolean]` | false |
transition | transition name | ^[string] | '' |
'' |
Events
Name | Description | Type |
---|---|---|
visible-change | 当 tooltip 展示/隐藏时被触发 | boolean |
click-outside | 当点击到 Tooltip 外侧区域时被触发 | boolean |
Slots
Name | Description |
---|---|
default | Tooltip triggering & reference element |
content | customize content |
Exposes
Name | Description | Type |
---|---|---|
show | expose show function | ^[Function](event?: Event | undefined) => void |
hide | expose hide function | ^[Function](event?: Event | undefined) => void |