Vue 3 中的 el-tooltip 详解：语法、示例及与其他框架对比

前言

🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF

1. 基本知识

el-tooltip 是 Element Plus（Vue 3 组件库）中的一个用于提示的组件，它可以在用户悬停或点击元素时显示额外信息。通常用于按钮、图标等需要提供额外描述的地方

基本语法如下：

html 复制代码

<el-tooltip content="提示内容" placement="top">
  <el-button>悬停查看</el-button>
</el-tooltip>

主要属性如下：

属性名	说明	类型	默认值
content	显示的提示内容	string	---
placement	提示框出现的位置（top, right, bottom, left等）	string	bottom
trigger	触发方式（hover, click, focus, manual）	string	hover
effect	主题样式（dark 或 light）	string	dark
disabled	是否禁用 tooltip	boolean	false
show-after	延迟显示（毫秒）	number	0
hide-after	延迟隐藏（毫秒）	number	0

基本的Demo：

html 复制代码

<template>
  <div>
    <el-tooltip content="这是一个提示" placement="top">
      <el-button type="primary">悬停查看</el-button>
    </el-tooltip>

    <el-tooltip content="点击触发" placement="right" trigger="click">
      <el-button type="success">点击查看</el-button>
    </el-tooltip>

    <el-tooltip content="焦点触发" placement="bottom" trigger="focus">
      <el-input placeholder="输入框提示"></el-input>
    </el-tooltip>

    <el-tooltip content="手动触发" v-model="visible">
      <el-button @click="visible = !visible">手动切换</el-button>
    </el-tooltip>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const visible = ref(false);
</script>

el-tooltip 与其他框架对比

框架/库	组件名	主要差异点
Element Plus	el-tooltip	基于 Vue 3，支持 v-model 控制显示状态，可搭配 el-button、el-input 等
Ant Design Vue	a-tooltip	需使用 title 作为提示内容，placement 选项更丰富
Bootstrap Vue	b-tooltip	依赖 Popper.js，使用 target 绑定元素
Vuetify	v-tooltip	通过 activator 绑定目标元素，可结合 v-model 控制

结合代码进行理解：

html 复制代码

<template>
  <el-table :data="tooltipData" border style="width: 100%">
    <el-table-column prop="framework" label="框架" width="180"></el-table-column>
    <el-table-column prop="component" label="组件名" width="180"></el-table-column>
    <el-table-column prop="difference" label="主要差异点"></el-table-column>
  </el-table>

  <el-tooltip content="Element Plus Tooltip" placement="top">
    <el-button type="primary">Element Plus</el-button>
  </el-tooltip>
  
  <a-tooltip title="Ant Design Vue Tooltip">
    <a-button type="primary">Ant Design Vue</a-button>
  </a-tooltip>

  <b-tooltip target="bootstrapBtn" title="Bootstrap Vue Tooltip"></b-tooltip>
  <b-button id="bootstrapBtn" variant="primary">Bootstrap Vue</b-button>

  <v-tooltip bottom>
    <template v-slot:activator="{ on, attrs }">
      <v-btn color="primary" v-bind="attrs" v-on="on">Vuetify</v-btn>
    </template>
    <span>Vuetify Tooltip</span>
  </v-tooltip>
</template>

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

const tooltipData = ref([
  { framework: 'Element Plus', component: 'el-tooltip', difference: '支持 Vue 3，`v-model` 控制显示' },
  { framework: 'Ant Design Vue', component: 'a-tooltip', difference: '使用 `title` 设置提示内容' },
  { framework: 'Bootstrap Vue', component: 'b-tooltip', difference: '基于 Popper.js，需要 `target` 绑定' },
  { framework: 'Vuetify', component: 'v-tooltip', difference: '通过 `activator` 绑定目标元素' }
]);
</script>

总的来说：

el-tooltip 适用于 Vue 3，可与 Element Plus 组件无缝集成
相比其他框架，如 a-tooltip（Ant Design Vue）和 b-tooltip（Bootstrap Vue），el-tooltip 具有更直观的 v-model 绑定和自定义选项
v-tooltip（Vuetify）更适合 Material Design 风格，并支持 activator 绑定

2. 实战Demo

原先实战引用过：Vue3优化表单标签与布局，解决文字过长问题（附Demo）

html 复制代码

<el-tooltip v-if="showColor"
            effect="dark"
            :content="$t('navbar.color')"
            placement="bottom">
  <div class="top-bar__item">
    <top-color></top-color>
  </div>
</el-tooltip>
<el-tooltip v-if="showDebug"
            effect="dark"
            :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')"
            placement="bottom">
  <div class="top-bar__item">
    <top-logs></top-logs>
  </div>
</el-tooltip>
<el-tooltip v-if="showLock"
            effect="dark"
            :content="$t('navbar.lock')"
            placement="bottom">
  <div class="top-bar__item">
    <top-lock></top-lock>
  </div>
</el-tooltip>
<el-tooltip v-if="showTheme"
            effect="dark"
            :content="$t('navbar.theme')"
            placement="bottom">
  <div class="top-bar__item top-bar__item--show">
    <top-theme></top-theme>
  </div>
</el-tooltip>
<el-tooltip effect="dark"
            :content="$t('navbar.notice')"
            placement="bottom">
  <div class="top-bar__item top-bar__item--show">
    <top-notice></top-notice>
  </div>
</el-tooltip>
<el-tooltip effect="dark"
            :content="$t('navbar.language')"
            placement="bottom">
  <div class="top-bar__item top-bar__item--show">
    <top-lang></top-lang>
  </div>
</el-tooltip>
<el-tooltip v-if="showFullScren"
            effect="dark"
            :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')"
            placement="bottom">
  <div class="top-bar__item">
    <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'"
       @click="handleScreen"></i>
  </div>
</el-tooltip>

基本方法如下：

js 复制代码

handleScreen() {
  fullscreenToggel();
},
setCollapse() {
  this.$store.commit("SET_COLLAPSE");
},
setScreen() {
  this.$store.commit("SET_FULLSCREN");
},
logout() {
  this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
    confirmButtonText: this.$t("submitText"),
    cancelButtonText: this.$t("cancelText"),
    type: "warning"
  }).then(() => {
    this.$store.dispatch("LogOut").then(() => {
      resetRouter();
      this.$router.push({path: "/login"});
    });
  });
}

截图如下：

Vue 3 中的 el-tooltip 详解：语法、示例及与其他框架对比

目录

前言

1. 基本知识

2. 实战Demo