在文本字段中用 v-tooltip 包裹 v-icon? [英] Wrapping v-icon with v-tooltip inside text-field?

问题描述

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

I need help with creating a text-field, which has an icon inside with a tooltip attached to the icon. My code:

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

有什么想法吗?

谢谢.

推荐答案

自从 v1.1 我们可以使用 append(和 prepend)插槽:

Since v1.1 we can use append (and prepend) slots for this:

<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

这篇关于在文本字段中用 v-tooltip 包裹 v-icon?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！