如何为 v-combobox 添加 v-tooltip？问题

Question

我已经为 v-tooltip 添加了代码，但是当我将鼠标悬停在 combobox 上时它没有显示，你看到错误了吗？或者按照代码的顺序，让我知道，please.Thanks .

<template>
  <div>
    <v-tooltip top>
      <template v-slot:activator="{ on, attrs }">
        <v-combobox
          bottom
          chips
          :items="items"
          label="Choose videos"
          multiple
        />
      </template>
      <span>Left tooltip aaaaaaaaaaaaaaaaaaaaaaa</span>
    </v-tooltip>
  </div>
</template>

When I hover the combobox , nothing happens

Answer 1

您没有应用激活器插槽属性。

其次，组合框创建一个父元素，用于包装激活器属性绑定到的输入。

这会破坏工具提示，导致它仅在单击框输入时触发。

您还需要将组合框包裹在 div 中，然后将激活器应用于 div，如下所示：

<template>
  <div>
    <v-tooltip top>
      <template #activator="{on, attrs}">
        <div multiple v-on="on">
          <v-combobox
            bottom
            chips
            :items="items"
            label="Choose videos"
            v-bind="attrs"
          />
        </div>
      </template>
      <span>Left tooltip aaaaaaaaaaaaaaaaaaaaaaa</span>
    </v-tooltip>
  </div>
</template>

同样的修复也适用于其他 Vuetify 元素，例如 v-select，它们也创建自己的父元素。

如何为 v-combobox 添加 v-tooltip？问题

How to add v-tooltip for v-combobox? issues

vue.js

vuetify.js