Vuetify Tutorial #18 - Tooltips

Hey gang, in this video we'll take a look at how to create tooltips in Vuetify. We'll use these for the little 'order by' buttons we created in the last video.

----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🤑🤑 Donate


🎓🎓 Find me on Udemy

[sette]

The documentation keeps changing, for new viewers this is the first button working according to the updated docs:

<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn small flat color="grey" @click="sortBy('title')" v-on="on">
<v-icon left small>folder</v-icon>
<span right class="caption text-lowercase">by project name</span>
</v-btn>
</template>
<span>Sorts projects by name</span>
</v-tooltip>

Hope this helps someone : )

[PlayToxia]

Awesome course, awesome explanations and awesome teacher! Thank u very much, I will end this course, i'm learning so much.
By the Way, here's a Tooltip with the new version:

<v-row class="mb-3">
<v-tooltip top>
<template v-slot:activator="{on}">

<v-btn small flat color="grey" @click="ordenar('titulo')" v-on="on">
<v-icon left small>mdi-folder</v-icon>
<span class="caption text-lowercase">Ordenar por nombre de proyecto: </span>
</v-btn>
</template>
<span>Ordenar elementos por nombre del proyecto</span>
</v-tooltip>

Now, you need to add a template with a 'v-slot:activator' and 'activate' it in some part of the code.
Hope this helps someone.

[JonBrookes]

This and those in the Vuetify Tutorial playlist is and are the best I've seen on the subject. It's one thing to say that Vuetify uses flexbox as others do but this series explains how. All much clearer to me now just for that one insight. The grid, padding, margins and breakpoints all make more sense thanks to this series. Another brilliant tutorial. Many thanks.

[GuitarAge]

Today, the documentation shows this:
<v-tooltip bottom>
<template #activator="data">
<v-btn color="primary" dark
</template>
<span>Tooltip</span>
</v-tooltip>

AND THIS DOESN"T WORK!
There's unknown 'data' and it doesn't have 'on' method/prop .... but YOUR TUTORIAL WORKS PERFECTLY!
Thanks a lot !

[Cho]

I have followed you up to this #18. I'm looking forward to the next tuts. Thanks a lot!

[chiraghs]

<v-tooltip top>
<template class="small" v-slot:activator="{ on }">
<v-btn small flat color="grey lighten-4" @click="sortBy('title')" v-on="on">
<v-btn-icon >
<v-icon left color="grey">folder</v-icon>
</v-btn-icon>
<span class="caption text-lowercase grey--text">By Project</span>
</v-btn>
</template>
<span>Sort By Project Name</span>
</v-tooltip>

[ayanbanerjee]

Awesome course. Thanks for the tutorial. Till now no problem faced.

[vipivoxa]

First, many thanks, awesome tutorial! Second, a hazillion dollar question, I want to skip to show a tooltip for xs and sm breakpoints. Was trying different options, but cant figure out if it is possible., without duplicating a code which is wrapped in a tooltip. Any suggestions?

[TheUndulyNoted]

Ok but how do you do it for NOT a button. The docs for this library are so shit!

[alandominiczak]

great tutorial! vuetify makes life easier ;)

[AbidAliVU]

Are you going to make tutorial on FLUTTER soon ?

[awokawok]

update from vuetify 2.3.0
‎
from:
<v-tooltip top>
<v-btn small flat color="grey" @click="sortBy('title')" slot="activator">
<v-icon left small>folder</v-icon>
<span class="caption text-lowercase">By project name</span>
</v-btn>
<span>Sort projects by project name</span>
</v-tooltip>
‎
to:
<v-tooltip top>
< *template v-slot:activator="{ on }"* >
<v-btn small *depressed class="grey--text"* @click="sortBy('title')" *v-on="on"* >
<v-icon left small> *mdi-folder* </v-icon>
<span class="caption text-lowercase">By project name</span>
</v-btn>
</ *template* >
<span>Sort projects by project name</span>
</v-tooltip>

[androidapps]

Thank you for making this. When is the next video ?

[johngee]

This is a very good tutorial. However, so much has changed in the Vuetify syntax, that many elements of the code presented will not work.

[TheRealAfroRick]

I understood everything you've said up to this point. The activator stuff is still kinda confusing.