Vuetify: [Bug Report] v-tooltip not working with v-badge and v-icon

Created on 3 Feb 2018  路  4Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 0.17.7
Vue: 2.5.13
Browsers: Firefox 58.0, Google Chrome, Microsoft Edge
OS: Windows 10

Steps to reproduce

See provided codepen. Codepen contains both a v-badge wrapped in tooltip and one which is not. The first does not display neither the v-badge or v-icon. The second works just fine without the v-tooltip wrap.

Expected Behavior

v-tooltip to display on hover.

Actual Behavior

Neither the badge or icon display when v-tooltip is in place.

Reproduction Link

https://codepen.io/jacCodePen/pen/VQedyd

layer 8 issue

Most helpful comment

@jcepek I was able to get it working by adding slot="activator" to your v-badge inside the tooltip

Let me know if that resolves your issue

See my codepen: https://codepen.io/smkimbal/pen/aqGbKZ

All 4 comments

@jcepek I was able to get it working by adding slot="activator" to your v-badge inside the tooltip

Let me know if that resolves your issue

See my codepen: https://codepen.io/smkimbal/pen/aqGbKZ

@chewy94 Worked like a champ! Thanks! My apologies to everyone, being new to this framework I really had thought I had found a bug. My intentions were not to have developers unnecessarily fix my work, I know you are all busy making a great product. Appreciate the point in the correct direction.

On a side note: Not sure if it is for me to close this issue or someone else.

You are more than welcome to close your issue if you find a solution 馃槃 And welcome to Vuetify!

I'll go ahead and close the issue though 馃槈

Actually the Vuetify documentation has an example with an icon.

<v-tooltip bottom>
  <v-icon slot="activator" dark color="primary">home</v-icon>
  <span>Tooltip</span>
</v-tooltip>

More info: Tooltip

Was this page helpful?
0 / 5 - 0 ratings