Vuetify3实现Tooltip仅点击触发，禁用hover触发的方案咨询

我曾见过基于Vuetify2实现带Tooltip的复制按钮示例，当前项目使用Vuetify3版本，已参考Vuetify文档编写组件代码，但当前代码实现的Tooltip不仅点击会触发，鼠标悬浮时也会触发，我不希望出现这种行为，请问有什么解决建议？

以下是我的组件代码：

<template>
  <VTooltip :model-value="data.showTooltip">
    <template v-slot:activator="{ props }">
      <VBtn
        icon
        :color="properties.buttonColor"
        :size="properties.size"
        :elevation="elevation"
        @click="copyData"
        v-on:hover="data.showTooltip = false"
        v-bind="props"
      >
        <VIcon>mdi-content-copy</VIcon>
      </VBtn>
    </template>
    Copied to clipboard
  </VTooltip>
</template>
<script setup lang="ts">
export interface CopyButtonProps {
  size?: string;
  elevation?: number | undefined;
  data: string;
  tooltipLocation?: string | undefined;
  tooltipTimeoutMs?: number;
  buttonColor?: string;
}
export interface CopyButtonData {
  showTooltip: boolean;
}
const properties = withDefaults(defineProps<CopyButtonProps>(), {
  size: "small",
  elevation: 1,
  tooltipLocation: "end",
  buttonColor: "white transparent",
  tooltipTimeoutMs: 1000,
});
const data = reactive<CopyButtonData>({
  showTooltip: false,
});
function showTooltip() {
  data.showTooltip = true;
  setTimeout(() => {
    data.showTooltip = false;
  }, properties.tooltipTimeoutMs);
}
async function copyData(isTooltipActive: boolean) {
  if (!properties.data) return;
  await navigator.clipboard.writeText(properties.data);
  showTooltip();
  return true;
}
</script>

解决建议 #

问题根源在于Vuetify3的VTooltip默认会监听激活元素的hover事件，加上直接绑定了activator的props到按钮上，这些props包含了hover相关的事件监听，导致悬浮时也会触发tooltip。要实现仅点击触发，需做以下修改：

关键修改步骤 #

1. 禁用悬浮触发：给VTooltip添加:open-on-hover="false"属性，明确关闭悬浮触发逻辑
2. 精简activator绑定：不要直接绑定完整的props到按钮，只保留必要的无障碍属性（如aria-describedby），避免引入hover事件
3. 移除多余事件：删掉按钮上的v-on:hover="data.showTooltip = false"，因为已经禁用了悬浮触发

修改后完整代码 #

<template>
  <VTooltip :model-value="data.showTooltip" :open-on-hover="false">
    <template v-slot:activator="{ props }">
      <VBtn
        icon
        :color="properties.buttonColor"
        :size="properties.size"
        :elevation="elevation"
        @click="copyData"
        :aria-describedby="props['aria-describedby']"
      >
        <VIcon>mdi-content-copy</VIcon>
      </VBtn>
    </template>
    Copied to clipboard
  </VTooltip>
</template>
<script setup lang="ts">
export interface CopyButtonProps {
  size?: string;
  elevation?: number | undefined;
  data: string;
  tooltipLocation?: string | undefined;
  tooltipTimeoutMs?: number;
  buttonColor?: string;
}
export interface CopyButtonData {
  showTooltip: boolean;
}
const properties = withDefaults(defineProps<CopyButtonProps>(), {
  size: "small",
  elevation: 1,
  tooltipLocation: "end",
  buttonColor: "white transparent",
  tooltipTimeoutMs: 1000,
});
const data = reactive<CopyButtonData>({
  showTooltip: false,
});
function showTooltip() {
  data.showTooltip = true;
  setTimeout(() => {
    data.showTooltip = false;
  }, properties.tooltipTimeoutMs);
}
async function copyData() {
  if (!properties.data) return;
  await navigator.clipboard.writeText(properties.data);
  showTooltip();
  return true;
}
</script>

修改后，tooltip只会在点击复制按钮时触发显示，悬浮时不再自动弹出，完全符合需求。

内容的提问来源于stack exchange，提问作者Vinicius Andrade