[Bug Report][3.0.6] VBtn icon is not visible when used as parent of VTooltip

[peshanghiwa]

Environment

Vuetify Version: 3.0.6
Vue Version: 3.2.45
Browsers: Chrome 108.0.0.0
OS: Linux x86_64

Steps to reproduce

Copy this exact snippet which is from the official vuetify 3 docs: https://next.vuetifyjs.com/en/components/tooltips/#props

<v-btn>
  Start
  <v-tooltip activator="parent" location="top">Tooltip</v-tooltip>
</v-btn>

which works fine, but when the button props are changed to the following:

<v-btn variant="text" icon="mdi-account" color="primary" flat>
  <v-tooltip activator="parent" location="top">Tooltip</v-tooltip>
</v-btn>

The button breaks and no icon will be shown while the tooltip is visible.

Expected Behavior

To show an icon button with hover effect

Actual Behavior

There exists the hover effect but the button icon is not visible

Reproduction Link

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

[peshanghiwa]

I believe the issue is with the VBtn component with icon prop as if anything injected into it as a custom slot it will override the icon by default and show the injected slot content.

ex: replace the v-tooltip component with a text and the button will show the text even tho it's an icon button

[elboukhari]

I can't reproduce it here . Works fine.

In your example, try giving your button a label as it's of text type..

[peshanghiwa]

@elboukhari that is because your version of button is not an icon if you use prepend-icon property on a VBtn it will still be treated as a normal button and you must have a text inside it otherwise it doesn't look symmetric (try removing the Upload text to see what i mean).

But in a case of using icon property (which is my case) your button style will be converted to a specific Icon button style and then the issue occurs (try replacing prepend-icon with icon and the issue occurs again)

[elboukhari]

@peshanghiwa In your repro link, you use a
variant="text" and an icon="mdi-account". But you don't have any label for your button. That's it.
Your button is not an icon one, but a text variant..

[peshanghiwa]

@elboukhari Seems like you're not getting the point, please take a look at this example here which is pure button with no extra props (with or without label property & with or without text property) the issue still exists,
I already Had figured out and explained the reason here
VBtn with icon prop doesn't work when used as parent of VTooltip

[elboukhari]

[peshanghiwa]

Please read the issue carefully before commenting, I had already stated in the Actual Behavior section of the Issue that the hover exists but the ICON IS NOT VISIBLE as it's clear in your screenshot too!

[KaelWD]

See #16060, icon is treated as a boolean prop if the default slot is used. Thanks to defaultProvider magic though all you need to do is add an empty icon:

<v-btn variant="text" icon="mdi-account" color="primary">
  <v-icon />
  <v-tooltip activator="parent" location="top">Tooltip</v-tooltip>
</v-btn>

or if you want to be more explicit:

<v-btn variant="text" icon color="primary">
  <v-icon icon="mdi-account" />
  <v-tooltip activator="parent" location="top">Tooltip</v-tooltip>
</v-btn>

or use the tooltip's activator slot instead of activator="parent"

@elboukhari variant and icon are independent

[peshanghiwa]

Thanks @KaelWD it works well now with your solution!
As an improvement it would be very great if we could directly use it or at least have a snippet on the official docs for this specific usecase as it's very common to use icon buttons with tooltips.
I'm closing the issue now.