Vuetify移动端点击图标后Tooltip文本始终显示问题求助

问题场景 #

使用Vuetify的v-tooltip组件绑定在v-icon上，需求是仅在桌面端hover时显示提示文本，移动端完全不展示。但实际在手机点击图标后，tooltip会弹出，需点击其他区域才隐藏，不符合预期。当前代码如下：

<v-tooltip :text="textTooltip" location="top">
     <template #activator="{ props }">
         <v-icon
              icon="mdi-circle"
              v-bind="props"
         ></v-icon>
     </template>
 </v-tooltip>

根据Vuetify官方文档，open-on-click默认值为false，open-on-hover默认值为true，但真实触屏设备的交互特性会导致hover事件被模拟触发，进而触发tooltip显示。

解决方案 #

方案1：通过断点禁用移动端tooltip #

利用Vuetify内置的断点系统，给tooltip添加disabled属性，仅在桌面端（md及以上断点）启用tooltip：

<v-tooltip 
  :text="textTooltip" 
  location="top"
  :disabled="!$vuetify.breakpoint.mdAndUp"
>
  <template #activator="{ props }">
    <v-icon
      icon="mdi-circle"
      v-bind="props"
    ></v-icon>
  </template>
</v-tooltip>

• $vuetify.breakpoint.mdAndUp会在屏幕宽度≥960px时返回true，此时tooltip正常响应hover事件；
• 移动端（sm及以下断点）时disabled为true，tooltip完全不响应任何交互，不会意外显示。

方案2：移动端直接不渲染tooltip #

如果需要更彻底的控制，可以在移动端仅渲染图标，不加载tooltip组件：

<template v-if="$vuetify.breakpoint.mdAndUp">
  <v-tooltip 
    :text="textTooltip" 
    location="top"
  >
    <template #activator="{ props }">
      <v-icon
        icon="mdi-circle"
        v-bind="props"
      ></v-icon>
    </template>
  </v-tooltip>
</template>
<v-icon v-else icon="mdi-circle"></v-icon>

注意事项 #

测试时需使用真实手机设备，DevTools的移动端视图事件模拟逻辑和真实触屏设备存在差异，可能无法复现真实问题。

内容的提问来源于stack exchange，提问作者Shivam Chaudhary