将鼠标悬停在工具提示上时保持 v-tooltip 打开 [英] Keep v-tooltip open when hovering over the tooltip
问题描述
首先，术语，链接"是鼠标进入的区域.工具提示"是弹出并显示额外信息的东西.--- 以上补充 2020-04-29
我正在使用 Vuetify 并尝试在鼠标悬停在工具提示"上时保持 v-tooltip 处于打开状态.工具提示中的内容将非常丰富，并且不希望在访问者查看时自动隐藏.
<v-工具提示v-model="显示"最大宽度="600px"内容类=链接工具提示内容"底部><template v-slot:activator="{ on }">({显示:假，悬停计时器:空}),方法: {框样式:函数(){返回 {左:100px"，顶部:100px"，宽度:100px"，高度:100px"，位置:绝对"};},鼠标悬停:函数(){console.log(`鼠标悬停`);this.show = true;clearTimeout(this.hoverTimer);},鼠标离开:函数(){console.log(`mouseleave`);this.hoverTimer = setTimeout(() => {this.show = false;}, 3000);}}}; 但这行不通.激活器插槽(链接")元素上的 mouseover 和 mouseleave 事件处理程序确实会触发，但默认插槽(工具提示")上的事件处理程序不会触发.
我认为原因是，因为工具提示"中的内容被移动到了 body 标签下的其他地方.
问题是，我如何在将鼠标悬停在工具提示"上时保持打开状态.
我像这样移动鼠标:
- 将鼠标悬停在链接上(显示工具提示).
- 将鼠标移出链接并移到工具提示中.(链接和工具提示相距几个像素)现在链接的 mouseleave 事件触发，我想在工具提示上添加一个 mouseenter 事件处理程序.我该怎么做?
我想在工具提示上添加一个 mouseenter 事件，以便我可以clearTimeout(hoverTimer) 并保持工具提示打开.
我知道 9 年前有一个类似的问题，使用 jQuery 鼠标悬停在工具提示上时保持打开状态 ，但如果可能的话，我不想使用 jQuery.我更喜欢 Vue 方式.
这是一个可重现的小例子:https://www.codeply.com/p/GuFXqAAU8Y
.v-tooltip__content 在 vuetify.min 中设置了 .如果您将其重新设置为 pointer-events:none.cssauto，则您可以将其悬停.
当它悬停时，它的父元素被悬停.当它的父级悬停时，它有一个工具提示.所以你只需要:
.v-tooltip__content {指针事件:自动；}First, the terms, "link" is the area where the mouse enters. The "tooltip" is the thing that pops up and shows extra information. --- above added 2020-04-29
I'm using Vuetify and trying to keep the v-tooltip open when mouse is hovering over the "tooltip". The content inside the tooltip is going to be rich and don't want that to automatically hide when visitor is looking into it.
<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>
But this doesn't work. The mouseover and mouseleave event handlers on the activator slot (the "link") element does fire, but the event handlers on the default slot (the "tooltip") don't fire.
I think the reason is, because the content inside the "tooltip" is moved to somewhere else under the body tag.
The questions is, how can I keep the "tooltip" open when hovering over it.
I'm moving the mouse like this:
- Hover over the link (the tooltip shows up).
- Move the mouse out of the link and into the tooltip. (The link and tooltip is a few pixels apart) Now the mouseleave event for the link fires, and I want to add a mouseenter event handler on the tooltip. How do I do that ?
I'm thinking to add an mouseenter event on the tooltip, so that I can clearTimeout(hoverTimer) and keep the tooltip open.
I know there's a similar question from 9 years ago, using jQuery Keep tooltip opened when the mouse is over it , but I don't want to use jQuery if possible. I prefer a Vue way.
Here's a little reproducible example: https://www.codeply.com/p/GuFXqAAU8Y
.v-tooltip__content has pointer-events:none set in vuetify.min.css. If you set it back to auto you allow it to be hovered.
When its hovered, its parent is hovered. And when its parent is hovered, it has a tooltip. So all you need is:
.v-tooltip__content {
pointer-events: auto;
}
这篇关于将鼠标悬停在工具提示上时保持 v-tooltip 打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
