[Vuejs]-Display tooltip icon right after the label using vuetify

by

0👍

Use the append slot for the v-text-field component. Inside of the v-text-field component, this should work for you:

<template v-slot:append>
  <v-tooltip bottom>
     <template #activator="{on}">
        <v-icon v-on="on">mdi-pencil</v-icon>
     </template>
  <v-tooltip>
</template>

Edit: You may not have material design icons configured with Vuetify like I do.

Try this, sorry about the confusion.

<v-text-field>
  <template v-slot:append>
    <v-tooltip bottom>
      <template v-slot:activator="{on}">
        <v-btn v-on="on">test</v-btn>
      </template>
      <span>Hello World</span>
    </v-tooltip>
  </template>
</v-text-field>

This should put a v-btn at the end of the text field with a tooltip that reads ‘Hello World’

Leave a comment