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

Question

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?

Answer 1

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.