将 Vuetify 工具提示（v-tooltip）组件与外部激活器（即未包装）一起使用

Question

我了解如何使用 Vuetify 的v-tooltip和包装组件的工具提示。但是，我不太确定如何将激活按钮放在外面。

例如我有这个（非工作代码）：

<v-tooltip bottom
  :activator="$refs.filterBtn"
>
  Filter displayed items
</v-tooltip>
<v-btn
  ref="filterBtn"
  icon
  @click="isFilter = !isFilter"
>
  <v-icon>fa-filter</v-icon>
</v-btn>

我也尝试使用 propactivator没有v-bind:相同的结果

想法：我希望将按钮与工具提示分开放置，以便运行单元测试。测试时，shallowMount剥离里面的任何东西<v-tooltip>，这样我就无法测试按钮。问题是我不知道如何使工具提示在悬停时显示（就像包裹时一样），我不想用@click.

编辑：这是代码笔

Answer 1

尝试这个：

<v-tooltip bottom
  v-model="filterBtnTTip"
>
  Filter displayed items
</v-tooltip>

<v-btn
  icon
  @click="isFilter = !isFilter"
  @mouseover="filterBtnTTip = true"
  @mouseleave="filterBtnTTip = false"
>
  <v-icon>fa-filter</v-icon>
</v-btn>

...
data () {
  return {
    ...
    filterBtnTTip: false
  }
}