Vuetify: Customized Tooltip Content

[Ewocker]

How can I change the text size of tooltip or using color for tooltip background and font?
Is there a way to do so?

[mfferreira]

@Ewocker Not currently, aside from changing it's styles yourself.
We might turn tooltips into a component with those options baked in eventually.

[Ewocker]

Thanks for the quick reply.
What do you mean by change it by myself? (This sounds kinda mean but that's not what I intend to speak, just asking question with poor language...)
I thought it is made as a directive which I do not have access unless I modify the vuetify source code.
Thanks again for this great UI tool 👍

[mfferreira]

@Ewocker You can change the tooltip style by targeting [data-tooltip]:before in your app styles.

Check the source for reference: https://github.com/vuetifyjs/vuetify/blob/master/src/stylus/components/_tooltips.styl

[johnleider]

He means add custom css to change it manually.

[keikoro]

Hi there, sorry for commenting on an old issue but I've been looking for a solution to my problem and keep coming back to this thread.

I'm assuming the above only works for changing the styling of all tooltips? I'm specifically looking to style one tooltip differently from the rest via scoped styles - I want to override the opacity among other things - and can't figure out how to do it (or if it's possible at all).

[johnleider]

Right now I do not think we provide an easy way to do this. Feel free to create a feature request https://issues.vuetifyjs.com

[keikoro]

@johnleider Thank you! Do issues go in here (GH) again? Just looking to confirm whatever I input there will be public.

[KaelWD]

Tooltips have a content-class prop, same as menus.

[keikoro]

@KaelWD Ohh, I wasn't aware of this prop, must have missed it when looking at the documentation, thank you! I can't seem to manage using it scoped, but it works for global styles. Works for me.

(My overall solution remains rather inelegant though because it turns out what I'm trying to do isn't as simple as originally thought. I only want to display the tooltips for certain screen sizes but can't just hide them because obviously, this also makes the containing elements disappear, which is not what I want.)