Display tooltip icon right after the label using vuetify

Question

I am using the Vuetify Tooltip component. I want to display the tooltip icon right after the label. I am not sure how can I do that. Please help me figure that out. Right now the icon appears as in image 1

I want it right after the information text.

             <v-container fluid>
              <v-layout row wrap>
                <v-flex xs11 md6 class="add-col-padding-right">
                    <v-text-field 
                            label='Information'
                            v-model='dummy.info'
                            >
                    </v-text-field>
                </v-flex>
                <v-flex xs1 md6 class="add-col-padding-left">
                  <v-tooltip attach>
                    <a href='javascript:void(0);' slot="activator">
                      <i class="material-icons icon-black">
                        info
                      </i>
                    </a>
                    <span>Please enter the user information correctly.</span>
                  </v-tooltip>
                </v-flex>
              </v-layout>
            </v-container>

Update

<v-text-field 
 label='Information'
 v-model='dummy.info'
 >
 <template v-slot:append>
  <v-tooltip bottom>
   <template #activator="{on}">
    <v-icon v-on="on">mdi-pencil</v-icon>
   </template>
  </v-tooltip>
 </template>
</v-text-field>

Update 2

If I put v-tooltip inside then it doesn't work. I want the icon to after right after information.

<v-tooltip right>
 <v-icon slot="activator" dark color="primary">info</v-icon>
 <span>Please enter the user information correctly.</span>
</v-tooltip>
<v-text-field 
   label='Information'
   v-model='dummy.info'
   >
</v-text-field>

jrend jrend · Accepted Answer · 2020-02-04T19:42:45

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'

Display tooltip icon right after the label using vuetify

1 Answers