Add tooltip on append-icon using Vuetify (1.0.5)

3
votes

I want to add a tooltip over the info icon. I am not able to figure out how can I do that. Help me out.

   <v-flex xs12 md6 class="add-col-padding-right">
    <v-text-field required
      label='Information'
      v-model='demo.information'
      :rules='nameRule'
      append-icon="info">
    </v-text-field>
   </v-flex>

Image1

Update

<v-flex xs12 md6 class="add-col-padding-right">
  <v-text-field required label='Information' v-model='demo.information' :rules='nameRule'>
   <template slot="append-outer">
    <v-tooltip right>
     <template v-slot:activator="{on}">
      <v-icon v-on="on">place</v-icon>
     </template>
     <span>tooltip!</span>
    </v-tooltip>
   </template>
  </v-text-field>
</v-flex>

image 2

1
vue.jsvuetify.js

1 Answers

2
votes

Since append-outer-slot does not exist yet in Vuetify 1.0.5, you'll need to use CSS/Vuetify's flex utility classes to place the icon afterward.

  <v-flex xs12 md6 class="add-col-padding-right">
    <div class="input-container d-flex align-center">
     <v-text-field required label='Information' v-model='demo.information' :rules='nameRule'></v-text-field>
     <v-tooltip right>
      <v-icon slot="activator">info</v-icon>
      <span>{{demo.information}}</span>
     </v-tooltip>
    </div>
   </v-flex>

Here's a working example: https://codepen.io/Qumez/pen/WNvNgJP