如何实现带可点击链接的Vuetify v-tooltip悬浮提示组件？

这不是Vuetify的自带限制，问题出在默认配置的关闭触发逻辑上：默认v-tooltip会在鼠标移出激活器元素后立即关闭，导致用户来不及把鼠标移动到tooltip内容区域点击链接。

你只需要给v-tooltip组件添加两个配置属性，即可实现可点击内部链接的效果：

• allow-hover：核心属性，允许鼠标悬停在tooltip内容上时保持tooltip处于打开状态
• close-delay：可选属性，单位为毫秒，设置鼠标移出激活器后多久关闭tooltip，留足用户移动鼠标的缓冲时间，避免还没移到tooltip上就触发关闭

修改后的代码示例如下：

<v-tooltip bottom allow-hover :close-delay="200">
  <template v-slot:activator="{ on, attrs }">
    <v-icon
      color="primary"
      dark
      v-bind="attrs"
      v-on="on"
    >mdi-home</v-icon>
  </template>
  <a href="#">clickable link</a>
</v-tooltip>

如果有更复杂的交互需求，你也可以通过v-model手动控制tooltip的显示/隐藏状态，自定义打开和关闭的触发逻辑。

内容的提问来源于stack exchange，提问作者Diogo Mendonça