vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.06k stars 6.91k forks source link

[Bug Report][3.5.16] v-btn does not show icon when using v-tooltip #19651

Open alanscordoba opened 1 week ago

alanscordoba commented 1 week ago

Environment

Vuetify Version: 3.5.16 Vue Version: 3.4.23 Browsers: Chrome 123.0.0.0 OS: Windows 10

Steps to reproduce

See the example

Expected Behavior

Show icon

Actual Behavior

Does not show the icon

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

If v-tooltip is removed it works fine.

SonTT19 commented 1 week ago

Not sure if it's expected behavior but you can show the icon by adding v-icon inside v-btn https://play.vuetifyjs.com/#eNpVULtuwzAM/BVWi1ugqffCCdCtf5AhzqA4TCBAD4KivQT591Cy81oE8u50d9LuYjIP7R/RzzSi+TWdYCBvBTd9BOimlSWqY12GFMW6iLxAFTxIBKfMujfh6Fbkx9ybh6BKCr3p2mV4oyQlL47ADuImK4nVhixjFDURzFKuLaJnqmIaey+m23uzgszFu/blQbrmgR0JZJRxtnOBEgtcgPEEVzhxCtDoXzRFDqC+WSDkM6yL4rP5R+8TbBP740fzVQJmSzUz1+84el+P/Q054XF4

alanscordoba commented 1 week ago

Ok thanks, that worked. It's strange that you have to add without properties. I don't know if it's what's expected.

mirocklez commented 1 week ago

In the docs, the default template is:

<v-tooltip text="Tooltip">
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props" icon="mdi-plus">test</v-btn>
  </template>
</v-tooltip>

and it is working like this.

alanscordoba commented 1 week ago

Is there any way to avoid having to emit the click event manually?

<template>
 <v-tooltip text="Tooltip">
        <template v-slot:activator="{ props }">
            <v-btn v-bind="props" icon="mdi-plus" @click="$emit('click')"></v-btn>
        </template>
    </v-tooltip>
</template>