【发布时间】：2021-06-14 22:39:27
【问题描述】：
首先，术语，“链接”是鼠标进入的区域。 “工具提示”是弹出并显示额外信息的东西。 --- 以上添加于 2020-04-29
我正在使用 Vuetify 并尝试在鼠标悬停在“工具提示”上时保持 v-tooltip 处于打开状态。 工具提示中的内容将会很丰富，并且不希望在访问者查看时自动隐藏。
<template>
<v-tooltip
v-model="show"
max-width="600px"
content-class="link-tooltip-content"
bottom>
<template v-slot:activator="{ on }">
<div
:style="boxStyle"
@mouseover="mouseover"
@mouseleave="mouseleave"
></div>
</template>
<template v-slot:default>
<v-card
@mouseover="mouseover"
@mouseleave="mouseleave"
>
<v-row dense>
<v-col>
<v-card-title class="headline">
rich tooltip
</v-card-title>
</v-col>
</v-row>
</v-card>
</template>
</v-tooltip>
</template>
<script>
export default {
data: () => ({
show: false,
hoverTimer: null
}),
methods: {
boxStyle: function() {
return {
left: "100px",
top: "100px",
width: "100px",
height: "100px",
position: "absolute"
};
},
mouseover: function() {
console.log(`mouseover`);
this.show = true;
clearTimeout(this.hoverTimer);
},
mouseleave: function() {
console.log(`mouseleave`);
this.hoverTimer = setTimeout(() => {
this.show = false;
}, 3000);
}
}
};
</script>
但这不起作用。激活器槽（“链接”）元素上的 mouseover 和 mouseleave 事件处理程序会触发，但默认槽（“工具提示”）上的事件处理程序不会触发。
我认为原因是，因为“工具提示”内的内容被移动到了body标签下的其他地方。
问题是，如何在将鼠标悬停在“工具提示”上时保持打开状态。
我是这样移动鼠标的：
- 将鼠标悬停在链接上（显示工具提示）。
- 将鼠标移出链接并进入工具提示。 （链接和工具提示相距几个像素） 现在触发链接的 mouseleave 事件，我想在工具提示上添加一个 mouseenter 事件处理程序。 我该怎么做？
我正在考虑在工具提示上添加一个 mouseenter 事件，以便我可以clearTimeout(hoverTimer) 并保持工具提示打开。
我知道 9 年前有一个类似的问题，使用 jQuery Keep tooltip opened when the mouse is over it，但如果可能的话我不想使用 jQuery。我更喜欢 Vue 的方式。
这是一个可重现的小例子： https://www.codeply.com/p/GuFXqAAU8Y
【问题讨论】：
标签： javascript vue.js vuetify.js