将鼠标悬停在工具提示上时保持 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 事件处理程序确实会触发，但默认插槽（“工具提示”）上的事件处理程序不会触发。

我认为原因是，因为“工具提示”内的内容被移动到正文标签下的其他位置。

问题是，当鼠标悬停在“工具提示”上时，如何保持它打开。

我这样移动鼠标：

1. 将鼠标悬停在链接上（显示工具提示）。
2. 将鼠标移出链接并移至工具提示中。（链接和工具提示相距几个像素）现在触发链接的 mouseleave 事件，我想在工具提示上添加 mouseenter 事件处理程序。我怎么做 ？

我正在考虑在工具提示上添加 mouseenter 事件，以便我可以clearTimeout(hoverTimer)保持工具提示打开。

我知道 9 年前有一个类似的问题，使用 jQuery Keep tooltip opens when the mouse is over it，但如果可能的话我不想使用 jQuery。我更喜欢 Vue 方式。

这是一个可重现的例子： https ://www.codeply.com/p/GuFXqAAU8Y

Answer 1

v-tooltip我建议您将props 设置v-menu为，而不是使用。如果您必须微调菜单中放置的任何内容，请确保设置适当的值，以便菜单在用户到达菜单之前不会关闭。open-on-hovertrueclose-delay

示例： https: //codepen.io/stephane303/pen/WNwdNxY

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

Answer 2

.v-tooltip__content已pointer-events:none设定在vuetify.min.css. 如果将其设置回auto允许其悬停。

当它悬停时，它的父级也会悬停。当其父级悬停时，它会显示一个工具提示。所以你需要的是：

.v-tooltip__content {
  pointer-events: auto;
}