Vuetify: v-tooltip not working properly on v-icon

[PhilGenois]

Here's an example: https://codepen.io/anon/pen/mmKjBy

[johnleider]

You cannot place tooltips on icons as it uses pseudo elements to display which is also used by font libraries.

[Christilut]

.icon:before {
  font-family: sans-serif;
}

this works for me, is there a reason I shouldn't do this?

[Ragura]

Thank you Christilut for the help, that worked perfectly for me and seems to have no side effects.

[amazzoccone]

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

[johnleider]

That is because in the example it is using Material Icons which handles the logic differently. This should hopefully be a mute point soon as we are removing activator wrappers in a future release.

[KaelWD]

Also this issue is from over a year ago and the original answer no longer applies.

[ghost]

That is because in the example it is using Material Icons which handles the logic differently. This should hopefully be a mute point soon as we are removing activator wrappers in a future release.

@johnleider So this is the wrong way?
I wanted to display tips for icons in actions column in the v-data-table component, but they move up the rows of the table:

<td class="justify-center layout px-0">
  <v-tooltip>
    <v-icon slot="activator" @click="viewItem(props.item)">open_in_new</v-icon>
    <span>View / Edit</span>
  </v-tooltip>
</td>

What then is the correct way?

[rhinck]

What then is the correct way?

@hprog You've probably moved on from this issue, but this worked for me:

<td class="justify-center layout px-0"> <v-tooltip top> <v-btn icon class="mr-0" slot="activator" @click="deleteItem(props.item)"> <v-icon>pageview</v-icon> </v-btn> <span>Tooltip</span> </v-tooltip> <v-tooltip bottom> <v-btn icon @click="editItem(props.item)" slot="activator"> <v-icon>edit</v-icon> </v-btn> <span>Tooltip 2</span> </v-tooltip> </td>

[DRoet]

Usually not a smart idea to comment on old threads, but here:

https://codepen.io/anon/pen/wbKRZz?editors=1010