Quasar & Vue 3: Let's Create a Badass Tooltip! (Real World App #8)

Quasar & Vue 3: Let's Create a Badass Tooltip! (Real World App #8)

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.

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

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Quasar Vue.js Tutorial - Getting Started

Quasar Vue.js Tutorial - Getting Started: Quasar is a really cool UI, responsive++ framework for Vue.js. It's most powerful features are it's component library and how easy it is to deploy to so many different platforms. In this video I look at a few different components and how to get started!!

Vue File Upload Using vue-dropzone Tutorial

Vue File Upload Using vue-dropzone Tutorial is the leading topic. For this example, I am using Vue 3 and vue-dropzone library. We will create a simple form component through the user can upload the image, and we will store in the Laravel 5.6 server.

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

7 Best Vue Highlight Component for Your Vue App

Vue highlight is often used to highlight text and syntax. Here are the 7 Vue highlight components I've collected.