移动端使用v-tooltip：能否通过点击同一元素切换提示框可见性？

当然可以实现点击同一元素切换提示框的可见性，不过hideOnTargetClick: true的默认逻辑并不是直接实现切换——它的作用是当tooltip已显示时，点击目标元素会隐藏tooltip，但要实现完整的“点击显示/点击隐藏”的切换效果，需要配合正确的配置。

方式一：利用插件自带配置实现 #

只需要在现有配置基础上，确保开启hideOnTargetClick: true，同时可以选择关闭自动隐藏（避免tooltip自行消失）：

<div
  class="my-tooltip"
  v-tooltip.top="{
    trigger: 'click',
    content: tooltipContent,
    hideOnTargetClick: true,
    autoHide: false // 可选：关闭自动隐藏，按需开启
  }"
>
  点击切换提示框
</div>

这样设置后，第一次点击元素会显示tooltip，第二次点击同一元素会隐藏，第三次点击又会重新显示，以此类推。如果需要tooltip在一段时间后自动消失，可以保留autoHide的默认值（通常为true），切换逻辑依然有效。

方式二：手动控制显示状态（更灵活） #

如果需要更自定义的逻辑，可以通过绑定visible属性来手动控制tooltip的显示：

<div
  class="my-tooltip"
  v-tooltip.top="{
    content: tooltipContent,
    visible: isTooltipVisible,
    trigger: 'manual' // 设置为手动触发模式
  }"
  @click="isTooltipVisible = !isTooltipVisible"
>
  点击切换提示框
</div>

<script>
export default {
  data() {
    return {
      isTooltipVisible: false,
      tooltipContent: '你的提示内容'
    }
  }
}
</script>

这种方式完全由你控制tooltip的显示状态，不受插件默认触发逻辑的限制，适合需要结合其他业务逻辑的场景。

如果第一种方式不生效，建议检查你的v-tooltip版本，确保使用的是较新的版本（如v3.x及以上），旧版本可能对hideOnTargetClick的处理逻辑不同。

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