Tooltip 文字提示

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

基础用法

9 种不同方向的展示方式

使用 content 属性来决定 hover 时的提示信息。 由 placement 属性决定展示效果： placement属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。 如 placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

<template>
<div class="tooltip-base-box">
    <div class="row center">
      <Tooltip
        class="box-item"
        content="Top Left prompts info"
        placement="top-start"
      >
        <Button>top-start</Button>
      </Tooltip>
      <Tooltip
        class="box-item"
        content="Top Center prompts info"
        placement="top"
      >
        <Button>top</Button>
      </Tooltip>
      <Tooltip
        class="box-item"
        content="Top Right prompts info"
        placement="top-end"
      >
        <Button>top-end</Button>
      </Tooltip>
    </div>
    <div class="row">
      <Tooltip
        class="box-item"
      
        content="Left Top prompts info"
        placement="left-start"
      >
        <Button>left-start</Button>
      </Tooltip>
      <Tooltip
        class="box-item"
        content="Right Top prompts info"
        placement="right-start"
      >
        <Button>right-start</Button>
      </Tooltip>
    </div>
    <div class="row">
      <Tooltip
        class="box-item"
        content="Left Center prompts info"
        placement="left"
      >
        <Button class="mt-3 mb-3">left</Button>
      </Tooltip>
      <Tooltip
        class="box-item"
        content="Right Center prompts info"
        placement="right"
      >
        <Button>right</Button>
      </Tooltip>
    </div>
    <div class="row">
      <Tooltip
        class="box-item"
      
        content="Left Bottom prompts info"
        placement="left-end"
      >
        <Button>left-end</Button>
      </Tooltip>
      <Tooltip
        class="box-item"
      
        content="Right Bottom prompts info"
        placement="right-end"
      >
        <Button>right-end</Button>
      </Tooltip>
    </div>
    <div class="row center">
      <Tooltip
        class="box-item"
      
        content="Bottom Left prompts info"
        placement="bottom-start"
      >
        <Button>bottom-start</Button>
      </Tooltip>
      <Tooltip
        class="box-item"
      
        content="Bottom Center prompts info"
        placement="bottom"
      >
        <Button>bottom</Button>
      </Tooltip>
      <Tooltip
        class="box-item"
      
        content="Bottom Right prompts info"
        placement="bottom-end"
      >
        <Button>bottom-end</Button>
      </Tooltip>
    </div>
  </div>
</template>
<script setup>
import Button from '@/components/Button/button.vue'    
import Tooltip from '@/components/Tooltip/Tooltip.vue'
</script>
<style scoped>
.tooltip-base-box {
  width: 100%;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  margin: 10px;
}
</style>

触发时机

可通 trigger 来进行控制 支持 Hover 和 Click。

<template>
  <Tooltip class="box-item" content="Hello World" placement="bottom" trigger="hover">
    <Button>Hover</Button>
  </Tooltip>
  <Tooltip class="box-item" content="Hello World" placement="bottom" trigger="click">
    <Button>Click</Button>
  </Tooltip>
</template>
<script setup>
import Button from '@/components/Button/button.vue'    
import Tooltip from '@/components/Tooltip/Tooltip.vue'
</script>
<style scoped>
.box-item {
  margin-right: 10px;
}
</style>

自定义提示内容

可以通过插槽来自定义显示内容。

<template>
  <Tooltip class="box-item" content="Hello World" placement="bottom" trigger="hover">
    <template #content>
      <h4>我是自定义的内容</h4>
    </template>
    <Button>Hover</Button>
  </Tooltip>
</template>
<script setup>
import Button from '@/components/Button/button.vue'    
import Tooltip from '@/components/Tooltip/Tooltip.vue'
</script>
<style scoped>
</style>

手动触发

通过 Tooltip 提供的方法手动触发提示内容的显示与隐藏

<template>
  <Tooltip class="box-item" content="我是手动触发的" manual placement="right" ref="tooltipRef">
    <Icon icon="bell" size="4x" class="icon"/>
  </Tooltip>
  <br/>
  <br/>
  <Button type="primary" @click="open">打开 Tooltip</Button>
  <Button @click="close">关闭 Tooltip</Button>
</template>
<script setup>
import { ref } from 'vue'
import Button from '@/components/Button/button.vue'    
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Icon from '@/components/Icon/Icon.vue'

const tooltipRef = ref(null)

const open = () => {
  tooltipRef.value.show()
}

const close = () => {
  tooltipRef.value.hide()
}
</script>
<style scoped>
.icon {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px;
}
</style>

参数

属性名	说明	类型	默认值
trigger	触发的时机	Click | Hover	Hover
placement	提示内容显示的位置	[方向]-[对齐位置] 四个方向：top、left、right、bottom 三种对齐位置：start, end	bottom
manual	是否为手动触发	true|false	false