在文本字段中用 v-tooltip 包装 v-icon？

Question

我需要有关创建文本字段的帮助，该文本字段内部有一个图标，图标上附有工具提示。我的代码：

<v-text-field
                    v-model="url">
                  <span slot="label">Url
                   <v-tooltip bottom>
                      <v-icon
                        slot="activator"
                        color="primary"
                        dark
                      >home</v-icon>
                      <span>Tooltip</span>
                    </v-tooltip>
                   </span>
               </v-text-field>

有什么想法吗？

谢谢。

Answer 1

因为 v1.1 我们可以为此使用 append（和 prepend）槽：

<v-text-field v-model="url" label="URL">
    <v-tooltip slot="append" bottom>
        <v-icon slot="activator" color="primary" dark>home</v-icon>
        <span>Tooltip</span>
    </v-tooltip>
</v-text-field>

Codepen

Answer 2

在 vuetify 版本 2.0.7 中，我使用以下代码。它完美运行。

      <v-tooltip bottom>
        <template #activator="{ on }">
          <v-icon color="red" class="mr-1" v-on="on">fab fa-youtube</v-icon>
        </template>
        <span>Tooltip</span>
      </v-tooltip>

Answer 3

将鼠标悬停在 v-text-field 内的图标上时显示工具提示

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-text-field v-model="url" label="URL">
          <v-tooltip slot="append">
            <template v-slot:activator="{ on }">
                <v-icon v-on="on" color="primary" dark>
                  mdi-home
                </v-icon>
              </template>
            <span>Tooltip</span>
          </v-tooltip>
        </v-text-field>
      </v-container>
    </v-content>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      url: 'https://whosebug.com/'
    }
  })
</script>

在文本字段中用 v-tooltip 包装 v-icon？

Wrapping v-icon with v-tooltip inside text-field?

vuetify.js