vue.js - Vue中如何实现单一el-tooltip对应多个v-for循环元素？
在v-for循环中，如果给每一个循环标签元素都添加一个el-tooltip会创建很多，如何控制只创建一个。
希望可以只创建一个el-tooltip，位置要根据每个不同标签元素居中对齐
共有3个答案
copy一份el-tooltip代码，然后改造成的单例模式就可以了。
// custom-tooltip
const Tooltip = () => {
const 实例 = null
mounted(() => {
if(实例不存在) {
创建实例
return 实例
}
return 实例
})
}受到评论区大佬（@陟上晴明）的提醒，在大佬的方案上做了一些改进 其实单纯利用css也可以做到。
大佬的方案是利用标签上的title属性配合自定义css来实现这个功能。
我在大佬的基础上 实现了一个小demo 效果还可 完善动画和定位即可使用
<style>
/* 隐藏title */
.box[title] {
text-decoration: none;
}
/* 自定义title */
.box:hover::after {
content: attr(data-title);
position: absolute;
padding: 5px;
border: 1px solid #000;
background: #fff;
color: #000;
/* 其他样式调整 */
}
</style>
<body>
<div class="box" data-title="演示title"></div>
</body>其中的知识点包括：如何隐藏原生title，如何利用data-*配合css的attr()语法获取title
el-tooltip 不支持，要么你考虑一下 html 原生的 title 属性？实现的效果是差不多的。
或者自己通过 CSS 的 伪类元素 + attr() 表达式通过 hover 来实现类似的需求效果。
在 Vue 中，如果你想要只使用一个 el-tooltip 组件来对应多个 v-for 循环中的元素，并且希望这个 el-tooltip 的位置能够跟随被触发的元素变化，这实际上需要一些非传统的处理，因为大多数 UI 框架（如 Element UI 的 el-tooltip）并不直接支持这样的功能。
不过，你可以通过一些技巧来模拟这种行为。以下是一个基本的思路，这里不使用 el-tooltip 组件，而是使用 CSS 和自定义的 Vue 逻辑来模拟：
- 使用 CSS
:hover伪类：为每个v-for元素添加相同的类，并使用 CSS:hover伪类来显示一个共享的 tooltip 元素。 - 定位 tooltip：使用 CSS 的
position: absolute;或position: fixed;配合 JavaScript/Vue 的计算属性或方法来动态设置 tooltip 的位置。 - 隐藏和显示 tooltip：可以使用 Vue 的
v-show或v-if指令来控制 tooltip 的显示和隐藏，但更好的方式是让 CSS 来处理这部分。
以下是一个简化的示例代码：
<template>
<div>
<div
v-for="(item, index) in items"
:key="index"
class="tooltip-trigger"
@mouseover="showTooltip(index, $event)"
@mouseleave="hideTooltip"
>
{{ item.text }}
</div>
<div
class="custom-tooltip"
v-show="isTooltipVisible"
:style="tooltipStyle"
>
{{ currentTooltipText }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ text: 'Item 1', tooltip: 'Tooltip for item 1' },
// ... 其他 items
],
isTooltipVisible: false,
currentTooltipIndex: null,
tooltipOffset: { x: 0, y: 20 }, // 可以根据需要进行调整
};
},
computed: {
tooltipStyle() {
if (!this.isTooltipVisible || this.currentTooltipIndex === null) return {};
const rect = this.$el.querySelector(`.tooltip-trigger:nth-child(${this.currentTooltipIndex + 1})`).getBoundingClientRect();
return {
top: `${rect.top + window.pageYOffset + rect.height + this.tooltipOffset.y}px`,
left: `${rect.left + window.pageXOffset + rect.width / 2 - 50}px`, // 假设 tooltip 宽度为 100px
};
},
currentTooltipText() {
if (this.currentTooltipIndex === null) return '';
return this.items[this.currentTooltipIndex].tooltip;
},
},
methods: {
showTooltip(index, event) {
this.isTooltipVisible = true;
this.currentTooltipIndex = index;
},
hideTooltip() {
this.isTooltipVisible = false;
this.currentTooltipIndex = null;
},
},
};
</script>
<style scoped>
.custom-tooltip {
position: absolute;
z-index: 1000; /* 确保 tooltip 显示在其他内容之上 */
/* 其他样式 */
}
.tooltip-trigger {
/* 其他样式 */
}
</style>注意：上述代码是一个简化的示例，可能需要根据你的具体需求进行调整。特别是 tooltipStyle 的计算部分，它依赖于 getBoundingClientRect() 来获取元素的位置，并据此设置 tooltip 的位置。你可能还需要处理窗口滚动、元素动态变化等情况。
-
本文向大家介绍Vue循环中多个input绑定指定v-model实例，包括了Vue循环中多个input绑定指定v-model实例的使用技巧和注意事项，需要的朋友参考一下 Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种： 一种是v-for中循环生成的输入框, 一种是在eleme
-
本文向大家介绍在vue中使用v-for，如何控制循环的次数？相关面试题，主要包含被问及在vue中使用v-for，如何控制循环的次数？时的应答技巧和注意事项，需要的朋友参考一下 问题分vue2和vue3 vue2由于v-for优先级高于v-if，所以推荐使用计算属性控制长度 vue3由于v-if优先级高于v-for，可以使用v-if控制长度，当然还是推荐使用计算属性
-
本文向大家介绍基于vue v-for 循环复选框-默认勾选第一个的实现方法，包括了基于vue v-for 循环复选框-默认勾选第一个的实现方法的使用技巧和注意事项，需要的朋友参考一下 应用场景：在进行多选的时候一般默认显示第一个。 实现方法：纯vue实现 例子： 拓展：默认被选中的复选框，只需要index指定即可。 以上这篇基于vue v-for 循环复选框-默认勾选第一个的实现方法就是小编分享给
-
情景 Vue 模板中我们经常会用到一些中间量，比如 中的 item.a.b.c 中的 message.split(' ') 问题 由于 v-for 或 <slot> 等的包裹，我们难以利用 computed 简单地提出这些中间量（当然我知道都有普通的解决方案) 我想到 Vue 既然有 v-if / v-for 等和 JavsScript 关键字风格类似的内建指令，能不能实现一个 v-let 来简化
-
我想使用useEffect和for-loop生成多个JSX元素，但在本例中没有呈现任何内容。 警告代码：“React Hook useEffect缺少依赖项：”Render InfoCard“。请包含它或删除依赖项数组React-Hooks/EXEXTIVE-DEPS”
-
小白请教问题，在vue中我们都知道v-show的显示与隐藏是通过控制display属性来实现，我在这里有一个不明白的地方，假如我们给元素A添加了v-show并指定了元素的默认布局时弹性盒即display:flex，此时当v-show=true时vue是如何避免这种对于display属性的冲突的呢？ 我在这个问题上不是很明白，还请大佬指教一下 最好有部分代码片段的解析，多谢各位大佬