el-tooltip详解

el-tooltip 是 Element Plus 框架中的一个工具提示组件，用于在鼠标悬停或点击某个元素时显示额外的信息。它可以包含任意内容，适用于多种提示和操作场景。

一。 el-tooltip 属性详解

1. value / v-model:

   • 类型: Boolean
   • 用途: 控制工具提示的显示状态。
   • 默认值: false

2. placement:

   • 类型: String
   • 用途: 工具提示的位置，可选值为 top、top-start、top-end、bottom、bottom-start、bottom-end、left、left-start、left-end、right、right-start、right-end。
   • 默认值: top

3. effect:

   • 类型: String
   • 用途: 工具提示的主题，可选值为 dark、light。
   • 默认值: dark

4. transition:

   • 类型: String
   • 用途: 工具提示的过渡动画。
   • 默认值: el-fade-in-linear

5. offset:

   • 类型: Number
   • 用途: 工具提示的偏移量。
   • 默认值: 0

6. visible-arrow:

   • 类型: Boolean
   • 用途: 是否显示箭头。
   • 默认值: true

7. enterable:

   • 类型: Boolean
   • 用途: 鼠标是否可以悬浮在工具提示上。
   • 默认值: true

8. popper-class:

   • 类型: String
   • 用途: 工具提示的自定义类名。

9. disabled:

   • 类型: Boolean
   • 用途: 是否禁用工具有提示。
   • 默认值: false

10. manual:

    • 类型: Boolean
    • 用途: 是否手动控制工具提示的显示与隐藏。
    • 默认值: false

二。 el-tooltip 事件详解

1. show:

   • 类型: Function
   • 用途: 工具提示显示时触发的回调函数。

2. hide:

   • 类型: Function
   • 用途: 工具提示隐藏时触发的回调函数。

三。 el-tooltip 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 工具提示的内容。

2. content:

   • 插槽名称: content
   • 用途: 工具提示的内容（替代 content 属性）。

四。示例代码

<template>
  <div>
    <h2>Tooltip 示例</h2>

    <!-- 基本用法 -->
    <el-tooltip content="这是一段提示信息" placement="top">
      <el-button>顶部触发</el-button>
    </el-tooltip>

    <!-- 自定义内容 -->
    <el-tooltip placement="right">
      <template #content>
        <p>这是一段自定义的内容。</p>
        <p>可以包含任意 HTML 元素。</p>
      </template>
      <el-button>右侧触发</el-button>
    </el-tooltip>

    <!-- 不同触发位置 -->
    <el-tooltip content="底部触发" placement="bottom">
      <el-button>底部触发</el-button>
    </el-tooltip>

    <!-- 不同主题 -->
    <el-tooltip content="深色主题" placement="top" effect="dark">
      <el-button>深色主题</el-button>
    </el-tooltip>
    <el-tooltip content="浅色主题" placement="top" effect="light">
      <el-button>浅色主题</el-button>
    </el-tooltip>

    <!-- 不显示箭头 -->
    <el-tooltip content="不显示箭头" placement="top" :visible-arrow="false">
      <el-button>不显示箭头</el-button>
    </el-tooltip>

    <!-- 动态控制显示状态 -->
    <el-button @click="showTooltip = !showTooltip">切换显示</el-button>
    <el-tooltip v-model="showTooltip" content="动态控制显示" placement="top" manual>
      <el-button>点击触发</el-button>
    </el-tooltip>

    <!-- 禁用工具提示 -->
    <el-tooltip content="禁用工具提示" placement="top" disabled>
      <el-button>禁用工具提示</el-button>
    </el-tooltip>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showTooltip = ref(false)
</script>