使用Vuetify（1.0.5）在附加图标上添加工具提示

Question

我想在信息图标上方添加工具提示。我无法弄清楚该怎么做。帮帮我。

   <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>

更新

<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> 

Answer 1

由于在Vuetify 1.0.5中尚不存在append-outer-slot，因此您需要使用CSS / Vuetify的flex实用工具类在其后放置图标。

  <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>

这是一个有效的示例：https://codepen.io/Qumez/pen/WNvNgJP