In this video, you’re gonna learn how to create a badass Tooltip component, using Quasar 2 & Vue 3 - from scratch.

This tooltip takes Quasar’s default tooltip component and supercharges it with a big chunky design, drop shadow, arrows that we can place in 12 different places.

We can also show this tooltip programmatically, hide it after a delay, and we can even add a close button to it and customise its colors.

In this series, I’m documenting my journey creating a Real World app, Fudget 2, from scratch, using Quasar 2, Vue 3 & Composition API. An app that will ultimately be deployed to the iOS, Android, Mac & Windows app stores.

👉 Source Code: https://dannys.link/badasstooltipcode

In each episode of this series, I’m gonna:

• give a progress report of where I’m up to
• talk about what I’ve learned
• talk about any problems I’ve encountered
• show you any interesting code & explain it
• let you know what I’m gonna do next

• 0:00 Introduction
• 1:51Getting Started
• 4:31 Create Tooltip Component
• 8:16 Tooltip Design
• 10:50 Arrow Design
• 14:32 Put Arrow Behind the Box
• 17:44 3 Different Top Arrows
• 21:35 Bottom, Left & Right Arrows
• 26:29 Setup an Arrow Prop
• 34:02 Showcase our Tooltips So Far
• 38:43 Programmatically Triggered Tooltip
• 41:12 Hide After Delay
• 49:06 Tooltip with Close Button
• 54:15 Custom Colors!

#quasar #vue