[SOLVED] Make tooltip appear clear icon in v-text-field using v-tooltip (vuetify)

Make tooltip appear clear icon in v-text-field using v-tooltip (vuetify)

I'm interested in creating a tooltip for the clear icon within the v-text-field. Could you please provide guidance on how to achieve this?

Solution

Pass the class of the clear icon (.v-field__clearable) to the :activator prop of v-tooltip:

<v-tooltip activator=".v-field__clearable">clear input</v-tooltip>

Make sure that the selector references a single element, for example by using a class on the v-text-field (in your example, you could do .search-input .v-field__clearable).

See how it works in the snippet:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  template: `
      <v-app>
        <v-main>
          <v-text-field
            v-model="msg"
            class="search-input"
            clearable
          />
          <v-tooltip activator=".search-input .v-field__clearable">
              clear it
          </v-tooltip>
        </v-main>
      </v-app>
  `,
  setup(){
    return {
      msg: ref('hello world')
    }
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>