Vuetify v-tooltip键盘点击按钮时不显示问题排查求助

云原生阿岚

2026-7-8

先确认组件结构是否规范
确保v-tooltip的activator插槽正确绑定了可聚焦元素，并且正确传递了插槽的props。如果用的是自定义组件当激活器，得保证它能转发焦点相关事件，或者本身是原生可聚焦元素（比如<button>，如果是<div>要加tabindex）。举个正确的结构例子：
```
<v-tooltip :open-on-focus="true">
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props">Hover/Focus Me</v-btn>
  </template>
  这是tooltip内容
</v-tooltip>
```
要是自定义组件当激活器，一定要确保它能接收并应用props里的focus、blur事件，不然tooltip感知不到焦点变化。
核对open-on-focus的绑定方式
确认你用的是动态绑定:open-on-focus="true"，而不是静态属性open-on-focus="true"——静态属性会被解析成字符串"true"，Vuetify需要的是布尔值，这细节容易踩坑。
排查自定义焦点逻辑的冲突
如果共享组件里有自定义的focus/blur处理，或者用了@focus.stop这类阻止事件冒泡的写法，会打断tooltip的焦点监听。检查一下激活元素上的事件绑定，有没有阻止事件传播的操作。

手动绑定事件强制触发
如果上面的方法都没用，可以手动给激活元素绑定焦点事件，直接调用tooltip的open/close方法：

<v-tooltip ref="tooltip">
  <template v-slot:activator>
    <v-btn 
      @focus="$refs.tooltip.open()" 
      @blur="$refs.tooltip.close()"
    >
      按Tab聚焦显示tooltip
    </v-btn>
  </template>
  手动触发的tooltip内容
</v-tooltip>