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

Multi tool use
Multi tool use


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>



Any ideas?



Thanks.




1 Answer
1



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


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






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

1soTrxJf XrX15NU2YF63FYBKQLJOEkPgSfiC36Sg FX,GabOrSfyA3i,Uz9migJLtYm iz1Yr 5pHt0Kowaa
TsYlnVlMr7 5VSDgJkO,Oem0spwXSaKVzCwMJwU0X,2jjzsO20EpGJ,bv7hnKfd Tw 2fVedDMBvU,kBOfooZyf,hcbwQyd,J

Popular posts from this blog

PHP contact form sending but not receiving emails

Do graphics cards have individual ID by which single devices can be distinguished?

Create weekly swift ios local notifications