Vuetify — Timeline Avatar and Tooltips

Image for post
Image for post
Photo by Daniel Höhe on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Timeline Avatar Dots

The dots on the timeline can be avatars.

For example, we can write:

<template>
<v-timeline>
<v-timeline-item v-for="n in 3" :key="n" large>
<template v-slot:icon>
<v-avatar>
<img src="http://i.pravatar.cc/64" />
</v-avatar>
</template>
<template v-slot:opposite>
<span>Tus eu perfecto</span>
</template>
<v-card class="elevation-2">
<v-card-title class="headline">Lorem ipsum</v-card-title>
<v-card-text>Lorem ipsum dolor sit amet.</v-card-text>
</v-card>
</v-timeline-item>
</v-timeline>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

We put the avatar icon in the icon slot to show it.

Colored Dots

The dots can be colored.

To change the color, we set the value for the color prop on the v-timeline-item :

<template>
<v-card class="mx-auto" max-width="400">
<v-card-text class="py-0">
<v-timeline align-top dense>
<v-timeline-item color="pink" small>
<v-row class="pt-1">
<v-col cols="3">
<strong>5pm</strong>
</v-col>
<v-col>
<strong>New Icon</strong>
<div class="caption">Mobile App</div>
</v-col>
</v-row>
</v-timeline-item>
<v-timeline-item color="teal lighten-3" small>
<v-row class="pt-1">
<v-col cols="3">
<strong>3-4pm</strong>
</v-col>
<v-col>
<strong>Meeting</strong>
<div class="caption mb-2">Hangouts</div>
</v-col>
</v-row>
</v-timeline-item>
<v-timeline-item color="pink" small>
<v-row class="pt-1">
<v-col cols="3">
<strong>12pm</strong>
</v-col>
<v-col>
<strong>Lunch break</strong>
</v-col>
</v-row>
</v-timeline-item>
<v-timeline-item color="teal lighten-3" small>
<v-row class="pt-1">
<v-col cols="3">
<strong>9-11am</strong>
</v-col>
<v-col>
<strong>Go Home</strong>
<div class="caption">Web App</div>
</v-col>
</v-row>
</v-timeline-item>
</v-timeline>
</v-card-text>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

Tooltips

We can add tooltips with the v-tooltip component.

For instance, we can write:

<template>
<div class="text-center">
<v-tooltip left>
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">Left</v-btn>
</template>
<span>Left tooltip</span>
</v-tooltip>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

The v-tooltip component has the activator slot to let us place the component for activating the tooltip.

The left prop places the tooltip on the left.

The placement of the toolbar can also be changed with the top , bottom , and right props.

We just pass the on event listeners to the v-on directive and the attrs object to the v-bind directive.

Visibility

We can change the visibility of the tooltip with v-model .

For example, we can write:

<template>
<v-container fluid class="text-center">
<v-row class="flex" justify="space-between">
<v-col cols="12">
<v-btn @click="show = !show">toggle</v-btn>
</v-col>
<v-col cols="12" class="mt-12">
<v-tooltip v-model="show" top>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on">
<v-icon color="grey lighten-1">mdi-cart</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
</v-tooltip>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
show: false,
}),
};
</script>

We have a Toggle button to toggle the show prop to toggle the tooltip.

v-model on the v-tooltip controls the tooltip.

Conclusion

We can add avatars and timelines and add tooltips with Vuetify.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store