Show tooltip in v-autocomplete drop-down items in vuetify 2.x-CodePudding

I'm working with vuetify 2.x and I want to know how to show a tooltip for each drop-down item of v-autocomplete.

The drop-down has checkbox and textfield

<v-autocomplete
solo
:items="..."
v-model="selected"
clearable
multiple
>
</v-autocomplete>

Problem- I tried using v-slot:item to write the tooltip for individual items but the checkbox does not get clicked when the text is clicked So basically the v-autocomplete does not work properly when this is used

Can anyone show me how to solve it so that the checkboxes work and also the tooltip shows?

CodePudding user response：

Tooltips works fine with v-slot:item. By example, this way:

<v-autocomplete
  v-model="values"
  :items="items"
  solo
  clearable
  multiple>
  <template #item="data">
    <v-tooltip bottom>
      <template #activator="{ on, attrs }">
        <v-layout wrap v-on="on" v-bind="attrs">
          <v-list-item-action>
            <v-checkbox v-model="data.attrs.inputValue"/>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>{{data.item}}</v-list-item-title>
          </v-list-item-content>
        </v-layout>
      </template>
      <span>{{ `${data.item} tooltip` }}</span>
    </v-tooltip>
  </template>
</v-autocomplete>

...

data: () => ({
  items: ['foo', 'bar', 'fizz', 'buzz'],
  values: ['foo', 'bar'],
  value: null,
}),

You may test this at CodePen.