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

【问题标题】：Wrapping v-icon with v-tooltip inside text-field?在文本字段中用 v-tooltip 包装 v-icon？
【发布时间】：2018-07-02 11:21:27
【问题描述】：

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

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

有什么想法吗？

谢谢。

【问题讨论】：

标签： vuetify.js

【解决方案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

【讨论】：

@rustyx 已编辑，感谢您的提醒。 Pen 使用的是最新的 vuetify 版本，vuetify v2 发生了很大变化，所以 pen 坏了。

【解决方案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>

【讨论】：

【解决方案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://stackoverflow.com/'
    }
  })
</script>

【讨论】：