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
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.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 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.
In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.
Vue highlight is often used to highlight text and syntax. Here are the 7 Vue highlight components I've collected.