javascript - 将鼠标悬停在工具提示上时保持 v-tooltip 打开

Question

首先，术语，“链接”是鼠标进入的区域。 “工具提示”是弹出并显示额外信息的东西。
--- 以上添加于 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

Answer 1

而不是使用 v-tooltip , 建议你使用v-menu与 open-on-hover Prop 设置为 true .
如果您必须轻推菜单中的任何内容，请确保设置适当的 close-delay值，因此菜单在用户到达之前不会关闭。
例子:
https://codepen.io/stephane303/pen/WNwdNxY

    <v-menu open-on-hover right offset-x nudge-right="20" close-delay="100">