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>
.vk-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>

手动触发

将 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`

Tooltip 文字提示 ​

基础用法 ​

不同位置 ​

触发方式 ​

更多内容的文字提示 ​

手动触发 ​

API ​

Attributes ​

Events ​

Slots ​

Exposes ​