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

前言

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

1. 基本知识

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

基本语法如下：

<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：

<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 控制

结合代码进行理解：

<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）

<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>

基本方法如下：

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"});});});
}