文字提示组件 (Tooltip)

Element UI 的 Tooltip 组件用于在鼠标悬停在元素上时显示提示信息。Tooltip 提供了多种配置选项，支持定制提示内容的显示位置、样式和行为。

提示

Tooltip 组件官方文档：https://element.eleme.cn/#/zh-CN/component/tooltip (opens new window)

1. 基本用法

说明：此示例展示了一个基本的 Tooltip 组件，通过 content 属性设置显示的提示内容，placement 属性控制 Tooltip 的出现位置。

<template>
  <el-tooltip content="这是提示信息" placement="top" effect="dark">
    <el-button>悬停显示提示</el-button>
  </el-tooltip>
</template>

设置内容说明：

• content 属性：设置显示的提示内容，此处为 "这是提示信息"。
• placement 属性：通过 placement="top" 设置 Tooltip 出现的位置在目标元素的上方。
• effect属性：通过设置effect属性来改变主题，默认为dark。
• 

2. Tooltip 属性

参数	说明	类型	可选值	默认值
effect	默认提供的主题	String	dark / light	dark
content	显示的内容，也可以通过 slot#content 传入 DOM	String	—	—
placement	Tooltip 的出现位置	String	top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end	bottom
value / v-model	状态是否可见	Boolean	—	false
disabled	Tooltip 是否可用	Boolean	—	false
offset	出现位置的偏移量	Number	—	0
transition	定义渐变动画	String	—	el-fade-in-linear
visible-arrow	是否显示 Tooltip 箭头	Boolean	—	true
popper-options	popper.js 的参数	Object	参考 popper.js 文档	{ boundariesElement: 'body', gpuAcceleration: false }
open-delay	延迟出现，单位毫秒	Number	—	0
manual	手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效	Boolean	—	false
popper-class	为 Tooltip 的 popper 添加类名	String	—	—
enterable	鼠标是否可进入到 Tooltip 中	Boolean	—	true
hide-after	Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏	Number	—	0
tabindex	Tooltip 组件的 tabindex	Number	—	0

3. Tooltip 插槽

插槽名称	说明
—	默认插槽，放置触发 Tooltip 的元素
content	用于自定义显示的提示内容

4. Tooltip 事件

Tooltip 组件没有独立的事件。

5. 常见使用示例

示例 1: 基本的 Tooltip

说明：此示例展示了一个基本的 Tooltip，通过 content 属性设置提示内容，并通过 placement 设置提示框显示在目标元素上方。

<template>
  <el-tooltip content="这是提示信息" placement="top">
    <el-button>悬停显示提示</el-button>
  </el-tooltip>
</template>

设置内容说明：

• content 属性：设置显示的提示内容，此处为 "这是提示信息"。
• placement 属性：通过 placement="top" 设置 Tooltip 出现的位置在目标元素的上方。

示例 2: 自定义内容的 Tooltip

说明：此示例展示了如何使用 slot#content 插槽自定义 Tooltip 显示的内容。还使用了 placement 属性将 Tooltip 显示在目标元素的右侧。

<template>
  <el-tooltip placement="right">
    <template #content>
      <span style="color: red;">这是自定义的提示内容</span>
    </template>
    <el-button>悬停显示自定义提示</el-button>
  </el-tooltip>
</template>

设置内容说明：

• slot#content 插槽：使用 #content 插槽自定义了 Tooltip 的显示内容，并且应用了红色文本样式。
• placement 属性：通过 placement="right" 将 Tooltip 显示在目标元素的右侧。

示例 3: 禁用 Tooltip

说明：此示例展示了如何通过 disabled 属性禁用 Tooltip，即使鼠标悬停在目标元素上也不会显示提示信息。

<template>
  <el-tooltip content="这是提示信息" :disabled="true">
    <el-button>这个 Tooltip 被禁用了</el-button>
  </el-tooltip>
</template>

设置内容说明：

• disabled 属性：通过 disabled="true" 禁用 Tooltip，使其不会显示提示信息。

示例 4: 控制显示状态的 Tooltip

说明：此示例展示了如何通过 v-model 手动控制 Tooltip 的显示状态，而不是依赖默认的 hover 事件。

<template>
  <el-tooltip v-model="tooltipVisible" content="手动控制显示状态的 Tooltip">
    <el-button @click="tooltipVisible = !tooltipVisible">点击切换 Tooltip</el-button>
  </el-tooltip>
</template>

<script>
export default {
  data() {
    return {
      tooltipVisible: false // 控制 Tooltip 显示状态的变量
    };
  }
};
</script>

设置内容说明：

• v-model 绑定：通过 v-model 绑定 tooltipVisible 变量手动控制 Tooltip 的显示状态。
• tooltipVisible：用于控制 Tooltip 显示与隐藏的状态。

示例 5: 延迟显示的 Tooltip

说明：此示例展示了如何通过 open-delay 属性设置 Tooltip 出现的延迟时间，鼠标悬停在目标元素上时 Tooltip 会在 500 毫秒后出现。

<template>
  <el-tooltip content="延迟显示的 Tooltip" :open-delay="500">
    <el-button>延迟显示提示</el-button>
  </el-tooltip>
</template>

设置内容说明：

• open-delay 属性：通过 open-delay="500" 设置 Tooltip 出现的延迟时间为 500 毫秒。

6. 常见场景与注意事项

• 信息提示：Tooltip 常用于在用户悬停或聚焦在某个元素时显示额外信息。
• 自定义内容：通过 slot#content 可以在 Tooltip 中展示任意自定义内容，不局限于纯文本。
• 手动控制：通过 v-model 可以手动控制 Tooltip 的显示状态，适合需要复杂交互的场景。

总结

• 灵活的显示位置：通过 placement 属性可以控制 Tooltip 的出现位置。
• 丰富的自定义选项：支持通过插槽自定义内容和样式，满足各种需求。
• 延迟和手动控制：通过 open-delay 设置延迟显示，通过 v-model 手动控制 Tooltip 的显示状态。