Tooltip 文字提示

常用于展示鼠标 hover 或点击时的提示信息，支持多种弹出位置和触发方式。

基础用法

在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。

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

<script setup>
import { ref } from 'vue'
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="tooltip-demo">
    <Tooltip content="这是一个提示文本">
      <Button>悬停查看提示</Button>
    </Tooltip>
  </div>
</template>

<style scoped>
.tooltip-demo {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
</style>

不同位置

Tooltip 组件提供了多种不同的位置，通过设置 placement 属性来配置。

<script setup>
import { ref } from 'vue'
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="tooltip-demo">
    <div class="tooltip-row">
      <Tooltip content="Top Left 提示" placement="top-start">
        <Button>上左</Button>
      </Tooltip>
      <Tooltip content="Top 提示" placement="top">
        <Button>上边</Button>
      </Tooltip>
      <Tooltip content="Top Right 提示" placement="top-end">
        <Button>上右</Button>
      </Tooltip>
    </div>
    <div class="tooltip-row">
      <Tooltip content="Left 提示" placement="left">
        <Button>左边</Button>
      </Tooltip>
      <div style="width: 80px;"></div>
      <Tooltip content="Right 提示" placement="right">
        <Button>右边</Button>
      </Tooltip>
    </div>
    <div class="tooltip-row">
      <Tooltip content="Bottom Left 提示" placement="bottom-start">
        <Button>下左</Button>
      </Tooltip>
      <Tooltip content="Bottom 提示" placement="bottom">
        <Button>下边</Button>
      </Tooltip>
      <Tooltip content="Bottom Right 提示" placement="bottom-end">
        <Button>下右</Button>
      </Tooltip>
    </div>
  </div>
</template>

<style scoped>
.tooltip-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 0;
}
.tooltip-row {
  display: flex;
  gap: 20px;
}
</style>

触发方式

Tooltip 组件提供了两种触发方式：hover 和 click。

<script setup>
import { ref } from 'vue'
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="tooltip-demo">
    <Tooltip content="悬停触发的提示" trigger="hover">
      <Button>悬停触发（默认）</Button>
    </Tooltip>
    
    <Tooltip content="点击触发的提示" trigger="click">
      <Button>点击触发</Button>
    </Tooltip>
  </div>
</template>

<style scoped>
.tooltip-demo {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 40px 0;
}
</style>

手动控制

通过设置 manual 属性可以手动控制 Tooltip 的显示与隐藏。

<script setup>
import { ref } from 'vue'
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'

const tooltipRef = ref(null)

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

const hideTooltip = () => {
  tooltipRef.value.hide()
}
</script>
<template>
  <div class="tooltip-demo">
    <Tooltip
      content="这是一个手动控制的提示"
      manual
      ref="tooltipRef"
      placement="top"
    >
      <Button>手动控制的目标元素</Button>
    </Tooltip>

    <div class="control-buttons">
      <Button type="primary" @click="showTooltip">显示提示</Button>
      <Button @click="hideTooltip">隐藏提示</Button>
    </div>
  </div>
</template>

<style scoped>
.tooltip-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 0;
}
.control-buttons {
  display: flex;
  gap: 10px;
}
</style>

自定义内容

可以通过插槽 content 自定义提示内容。

<script setup>
import { ref } from 'vue'
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'
import Icon from '@/components/Icon/Icon.vue'
</script>
<template>
  <div class="tooltip-demo">
    <Tooltip>
      <Button>自定义内容</Button>
      <template #content>
        <div class="custom-tooltip-content">
          <h4><Icon icon="info-circle" /> 自定义提示内容</h4>
          <p>这里可以放置更加丰富的内容，包括：</p>
          <ul>
            <li>文本</li>
            <li>图标</li>
            <li>其他组件</li>
          </ul>
        </div>
      </template>
    </Tooltip>
  </div>
</template>

<style scoped>
.tooltip-demo {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.custom-tooltip-content {
  padding: 5px;
}
.custom-tooltip-content h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #409eff;
}
.custom-tooltip-content p {
  margin: 5px 0;
}
.custom-tooltip-content ul {
  margin: 5px 0;
  padding-left: 20px;
}
</style>

Attributes

参数	说明	类型	默认值
content	显示的内容	String	—
placement	Tooltip 的出现位置	String	bottom
trigger	触发方式	String	hover
manual	是否手动控制模式	Boolean	false
popperOptions	popper.js 的参数	Object	—
transition	动画名称	String	fade
openDelay	延迟出现，单位毫秒	Number	0
closeDelay	延迟关闭，单位毫秒	Number	0

Events

事件名	说明	回调参数
visible-change	显示状态变更时触发	新的显示状态 (Boolean)
click-outside	点击外部时触发	—

Slots

插槽名	说明
—	Tooltip 触发的元素
content	自定义内容

Methods

方法名	说明	参数
show	显示 Tooltip	—
hide	隐藏 Tooltip	—