vue.js 如何为v-combobox添加v-tooltip?议题

aiazj4mn  于 2023-05-29  发布在  Vue.js
关注(0)|答案(2)|浏览(169)

我添加了v-tooltip的代码,但是当我将鼠标悬停在组合框上时,它没有显示,你是否看到了错误或代码的顺序,请让我知道。谢谢。

<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

mzmfm0qo

mzmfm0qo1#

您没有应用激活器插槽属性。
其次,组合框创建一个父元素,该元素 Package 激活器属性绑定到的输入。
这会中断工具提示,使其仅在单击框输入时触发。
你需要做的是将你的组合框 Package 在一个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,它们也创建了自己的父元素。

3zwjbxry

3zwjbxry2#

试试这个代码。

<div>
   <v-combobox
      bottom
      chips
      :items="items"
      label="Choose videos"
      multiple
   />
   <v-tooltip activator="parent" location="top">Font</v-tooltip>
</div>

相关问题