【区分vue2和vue3下的element UI Tooltip 文字提示组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 和 Vue 3 中，Element UI（针对 Vue 2）和 Element Plus（针对 Vue 3）提供了 Tooltip 文字提示组件，用于在鼠标悬停时显示一段文本信息。这两个库中的 Tooltip 组件在属性、事件和方法的使用上有所相似，但也有一些差异。下面我将分别介绍 Vue 2 下的 Element UI Tooltip 组件和 Vue 3 下的 Element Plus Tooltip 组件的使用方式。

Vue 2 + Element UI Tooltip 组件

属性（Props）

• content：显示的内容，也可以使用 slot 插槽定义。
• placement：Tooltip 的出现位置，可选值有 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end。
• value 或 v-model：绑定 Tooltip 的显示状态，但通常 Tooltip 是基于鼠标悬停自动显示的，这个属性用得较少。
• disabled：是否禁用 Tooltip。
• offset：出现位置的偏移量。
• transition：定义显示隐藏时的过渡动画。
• visible-arrow：是否显示 Tooltip 箭头。
• popper-class：Tooltip 的自定义类名。
• popper-options：popper.js 的参数（Element UI 内部使用 popper.js 来实现 Tooltip）。
• enterable：鼠标是否可进入到 tooltip 中。
• manual：是否手动控制显示隐藏，设为 true 时，需要使用 visible 属性来控制显示隐藏。

事件（Events）

• show：显示时触发。
• after-enter：显示动画播放完毕之后触发。
• hide：隐藏时触发。
• after-leave：隐藏动画播放完毕之后触发。

方法（Methods）

Element UI 的 Tooltip 组件通常不直接暴露方法供外部调用。你主要通过修改绑定的 visible 属性（在 manual 为 true 的情况下）或监听事件来控制 Tooltip 的显示和隐藏。

示例

<template>
  <el-tooltip class="item" effect="dark" content="文字提示" placement="top">
    <el-button>悬停显示</el-button>
  </el-tooltip>
</template>

<script>
export default {
  // 通常不需要在 script 中添加特定的逻辑来控制 Tooltip
};
</script>

Vue 3 + Element Plus Tooltip 组件

属性（Props）

• content：显示的内容，也可以使用 slot 插槽定义。
• placement：Tooltip 的出现位置，与 Element UI 相同。
• disabled：是否禁用 Tooltip。
• offset：出现位置的偏移量。
• popper-class：Tooltip 的自定义类名。
• popper-options：popper.js 的参数（Element Plus 内部同样使用 popper.js）。
• show-after：延迟显示 Tooltip 的时间（毫秒）。
• hide-after：鼠标移开后，延迟隐藏 Tooltip 的时间（毫秒）。
• manual：是否手动控制显示隐藏。
• open-delay：显示 Tooltip 的延时（毫秒），与 show-after 类似，但优先级更高。
• trigger：触发 Tooltip 的方式，可选值为 ‘hover’、‘click’、‘focus’、‘manual’。

事件（Events）

• update:modelValue（在 manual 为 true 时）：当 Tooltip 的显示状态变化时触发。
• show：显示时触发。
• after-enter：显示动画播放完毕之后触发。
• hide：隐藏时触发。
• after-leave：隐藏动画播放完毕之后触发。

方法（Methods）

与 Element UI 类似，Element Plus 的 Tooltip 组件通常也不直接暴露方法供外部调用。你主要通过修改绑定的 modelValue 属性（在 manual 为 true 的情况下）或监听事件来控制 Tooltip 的显示和隐藏。

示例

<template>
  <el-tooltip class="item" effect="dark" content="文字提示" placement="top" trigger="hover">
    <el-button>悬停显示</el-button>
  </el-tooltip>
</template>

<script>
export default {
  // 通常不需要在 script 中添加特定的逻辑来控制 Tooltip
};
</script>

注意：在 Vue 3 和 Element Plus 中，你可能会注意到一些属性名称的变化（如 `show