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