使用 vuetify 在标签后显示工具提示图标

Question

我正在使用 Vuetify Tooltip 组件。我想在标签之后显示工具提示图标。我不确定我该怎么做。请帮我弄清楚。现在图标如图 1 所示

我想要它在信息文本之后。

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

更新

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

更新 2

如果我将 v-tooltip 放入其中，则它不起作用。我希望在信息之后立即显示图标。

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

Answer 1

将append 插槽用于v-text-field 组件。在 v-text-field 组件内部，这应该适合您：

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

编辑：您可能没有像我一样使用 Vuetify 配置材料设计图标。

试试这个，很抱歉造成混乱。

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

这应该在文本字段的末尾放置一个 v-btn，并带有一个显示为“Hello World”的工具提示