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

in this video you're going to learn how to create this badass tooltip component using quasar 2 and view 3 from scratch and this tooltip takes quasars default tooltip component and supercharges it with a big chunky design a nice drop shadow arrows that we can place in three different places on the top three different places on the bottom uh three different places on the left and right as well we can also programmatically trigger this tool tip and hide it and we can also hide it after a delay and we can even add a close button to it which the user can click to close the tooltip and we can also customize the background and text colors of our tool tip with any of the colours in our current theme or the quasar colour palette [Music] so in this series i'm documenting my journey creating a real world quasar app budget 2 from scratch using quasar 2 and view 3 an app that will ultimately be deployed to the ios android mac and windows app stores and this week not much has changed in the app aside from adding this tooltip component so i'm using these tooltips to help the user get started in the app so we see one here when the app first starts up and when they click this button we see another one here with an arrow at the bottom then after the user types something in we see another one down here with an arrow on the top right and when they click on create we see another tool tip with an arrow at the top middle telling the user what to do next so since not much has changed in the app this week let's make this video a tutorial video where i show you how to create this tool tip component from scratch in a new quasar 2 view 3 project make sure you click subscribe and click the bell so you don't miss any of the videos in this series and you can find the link to the whole playlist in the description let's get started by creating a new quasar 2 and view 3 project so i'm going to go to the quasar site quasar.dev and at the time i'm recording this quasar version 2 is still in beta so i'm going to jump to this red link jump to quasar cli and install quasar cli and if you don't have the quasar cli installed you'll need to install it with one of these commands in your terminal and once that's installed we can create a new project with the quasar create command so i'm just going to make sure i'm in the folder where i keep all my projects and i'm going to run quasar create let's call it quasar dash badass dash tool tip and because quasar 2 is still in beta i'm going to add dash dash branch next but you might not need to do that if quasar 2 is out of beta but i'm going to add branch next i'm going to leave the project name for the product name i'll put badass tooltip and i'll leave the description um for the author i'll just put my name and i'm going to use sas with scss syntax for the css preprocessor i'm going to disable eslint for the purposes of this tutorial although you might want to consider using that on your own projects and we don't need to enable anything else here so i'm just going to hit enter i'm going to choose yes use npm to install the dependencies okay let's finish creating our project we can start it by just running quasar dev and i can see the folder it's created here so i'm going to drag that into vs code and open up the terminal and just run quasar dev we can now see our project running in the browser and before we start creating our component let's just tidy some things up so i'm going to jump to source and layouts and main layout.view i'm going to change the title here to badass tooltip and i'll get rid of this div with the quasar version and save that and i'm also going to get rid of the draw so we have more space to work with so i'm going to select all of the eq draw i'll just get rid of that and we're not going to need any of this essential link stuff now so i'm going to remove this import and this links list i'll remove this components object and i'll just remove everything inside this setup function and save that and i'll also delete the essential link component in the components folder get rid of that right now let's create our badass tooltip component [Music] okay so i'm going to jump to the components folder and create a new file called tooltip dot view then i'll scaffold a view file using the vita extension and to begin with we're just going to add one of quasars default tool tip components in here so if we go to the quasar site and view components tooltip so we're just going to add one of these components and if we go to view source we can just add one of these like this so i'm going to copy that uh paste it inside our template fix the indentation uh we want to be able to pass any text we want down to this component so i'm going to replace this text here with a slot component so that any text we place inside our tooltip component will be passed inside this q tool tip component so i'm going to save that and i'm going to jump to our page component which is in source pages and index dot view i'll get rid of this image here and instead we'll add a cue button component and actually we won't give that self-closing tags we'll give it a closing tag so we can place our tooltip inside it and i'll set the label to show a badass tooltip i'll set the color to primary and we want to place our tool tip component inside this cue button component because that's how we use the default quasar tool tip we place it inside elements like you can see here in this example so first we need to import that component so i'm going to add a components object here and for the html tag we'll just use the tag tool tip i'm going to set this to require default and then i'm going to pass the path to our component in here so that's going to be at components slash tooltip and we don't need to add the dot view so i'll save that we should be able to place a tooltip component inside this cue button uh we'll stick some text in there i am so badass and we'll save that i'll reload the page and hopefully if we hover over this button we can see a tooltip component now any props that we add to this tooltip component will be passed directly down to this q tool tip component which means that any of the default props that we can use on a q tool tip component so any of these props in the api section here we can add directly to our tool tip and it will be passed down to this q tool tip component so to make it easier for us to style our tooltip i'd like it to just stay permanently visible so if we jump to the model section we can just set the model value prop to true to make this permanently visible so i'm just going to break this up onto multiple lines and we'll set the model value prop to true and save that and we can now see it permanently on the screen and just to make sure it doesn't disappear when we hover off the button component i'm also going to add another prop i'm gonna jump to behavior and we can add this no parent event prop which skips attaching events to the target dom element which in this case is this button so i'm gonna add this prop as well so no parent event save that reload and now the tooltip stays there all the time even if we hover off and on this button so now it's going to be much easier for us to style this guy and add colors drop shadow arrows and all that good stuff [Music] so before we start adding arrows and stuff like that let's just style up the basic box and the text add some big chunky text some border radius and some drop shadow and a nice background color so while we're doing this i'm just going to zoom in a little bit and reload and i'd like to have a nice opaque dark gray background by default for our tool tip so i'm going to jump to the quasar site go to style and identity and color palette and i'll scroll down to the grays and this gray 10 class should be good so i'm going to jump to dot view and i'll add a class to this q tool tip of bg dash grey dash 10 and save that and this is nice and dark and opaque now and i'd like the text to be a bit bigger so i'm going to jump back to the quasar site style and identity and typography and this text body1 class should do the trick that's nice and big so i'm also going to add that class to this q tool tip text-body one save that and i'll just reload the page and i'd also like this text to be bold so i'm going to add text dash bold as well now we see some nice bold text and i also want to add a nice box shadow and some more pronounced rounded corners and a bit more padding as well so i'm going to add a class to this q tool tip of tool tip so that we can add some more styles and in the style block i'm going to set the line to scss and we'll target this tool tip okay let's add the box shadow first so let's add box shadow and i'd like a nice blurry box shadow which just starts from the center so i'm going to set the horizontal to zero and the vertical to zero well i'll set the blur to 30 pixels and i'll set the spread to zero and for the color we'll use rgba a amoled zero red zero green and zero blue and then we'll add 0.5 for the opacity and i'll save that and we now have a nice box shadow i'm going to make the corners a bit more rounded so i'm going to set the border radius to 10 pixels and we need to add a semicolon there and i'd also like a bit more padding so i'm going to set the padding to 20 pixels save that reload and this is looking pretty good let's add some arrows to this sucker [Music] okay let's add an arrow to this box and you may have seen arrows added to boxes using the after pseudo selector such as in this example on codepen here so this is using the after pseudo selector to add these arrows by manipulating the borders of that after pseudo selector but because we have this drop shadow on our tool tip this isn't going to work for us so if i scroll up to this box selector which is selecting this box here if we add our drop shadow to that let's paste that in there then that looks kind of okay but if we add the same drop shadow to the after pseudo selector then it doesn't work we can clearly see the square edge of this pseudo selector and we can also see some drop shadow up here on the box as well so we're going to do it slightly differently from that we're actually just going to create a div for our arrow and we're going to rotate that so that the corner of that square becomes our arrow so after our default slot here i'm going to add a div with a class of tool tip dash arrow and i'll give it the same background color as our box so bg dash gray dash 10. i'm going to position this absolutely so we'll also add a class of absolute and save that let's add some styles to this arrow so i'm going to add and dash arrow to select this div and we'll give it a width of 30 pixels and a height of 30 pixels and we can't actually see that right now because if i inspect this q tool tip which has actually been added at the end of the body here in this div so if we scroll down through the styles we can see the overflow x is set to hidden and the overflow y is set to auto so i'm going to override these by adding overflow visible to the tool tip and save that and i'll just hide the chrome dev tools and reload that okay let's rotate this box by 45 degrees so that we have a point that we can use as our arrow so i'm going to add transform to this arrow and i'll set rotate to minus 45 degrees save that and we now have a nice point but let's place this first arrow at the top in the center so i'm going to add a top property and set that to zero and place it in the center i'm going to set the left property to 50 and then to pull it back 50 to put it in the middle i'm going to add to this transform property i'll add translate x which allows us to move things around on the x-axis and we'll set this to 0 50 percent save that and it's now in the middle and to make this arrow a little bit pointier i'm going to use the skew transform as well so i'll add skew i'm going to set this to minus 20 degrees comma minus 20 degrees save that let's add the same box shadow that we used on our box so rather than repeating this let's put this in a variable so i'll create a variable called box shadow and i'll cut this and paste it here and we'll just use our variable here and we'll copy this and add it to our arrow as well save that and we can now see the shadow on our arrow as well however you can see that this squished and rotated box is now covering up our text so let's now place this arrow behind the box [Music] let's place this arrow behind the box so it's not obscuring our text so what we're going to do here is set up another div for our text and we'll move all of our box styles to that new div and then use that index to place the text div above the arrow div so i'm going to surround this slot here where our text is displayed in a div with a class of tool tip dash text so i'll move that slot up there and save that i'm going to move all of these styles from the queue tooltip to this div so i'm going to cut these classes here these color and text classes and add them to this div and save that however we can now see some remnants from the cue tooltip styles here we can see this semi-transparent gray background so on the tool tip i'm going to set background to transparent and then i'm going to move all of our box styles box shadow border radius and padding to our tool tip text div so i'll add a selector for that so and dash text and we'll move these three properties down into the text div save that and i think the q tool tip has some default padding on it so i'm going to set the padding on the tool tip to zero i'll just reload to make sure that's working all right okay let's use that index to place the arrow div behind the text div and in order to use that index our element needs to be either absolutely positioned or relatively positioned so i'm going to add a class of relative dash position to the tooltip text div save that and we'll add a z index to this text div of 10 and then for the arrow div we'll add a lower z index so we'll set that to five save that and we can see the arrow is now behind the box however we do have a little issue here it's quite hard to see when the tooltip is so dark so just temporarily i'm just going to change these background classes to bg red save that so you can see the drop shadow from the text div can be seen on the arrow which doesn't look too great because i want this to look like all one shape the box and the arrow so what we can do is just move this box shadow which is on the text div back onto the tool tip div so i'll move this up to here save that this is all looking like one shape again however we can see some white borders there which are coming from the q tool tip component so i'm just going to add the same border radius property to the tooltip selector here so i'll add border radius 10 save that and this is looking pretty good uh before we move on i'm just going to set this bg red class back to bg gray 10 save that okay so we have our first arrow working let's add some more arrows to this guy it would be good if we could display an arrow at the top left and top right of this box as well as in the top middle so let's set up some classes for managing that so first let's set up a class for adding this top middle arrow that we've already done so i'm going to add a class to the q tool tip of tool tip dash arrow dash top and i'll save that and so we want to select this tooltip arrow div when it's parent has this tooltip arrow dash top class so inside this arrow selector here i'm going to add dot tool tip dash arrow dash top and then i'll add an and symbol so that and symbol is basically going to select this element here when its parent has this class of tooltip dash arrow top and so we now want to move the properties which are positioning this arrow at the top center down into this selector here so that's the top and left properties so i'm going to move them down into this selector here so let's save that and make sure it's still working yep our arrow is still at the top and in the middle so let's set up a class for a top left arrow which will be displayed over here so i'll change this class that we added to tooltip arrow top dash left and save that and i'll just duplicate this tooltip arrow top selector and change this to tool tip arrow top dash left and save that and we don't want to position this in the center we want it over on the left so i'm going to change this left property value to let's try zero pixels save that and that's a bit too far to the left so let's try 20 pixels oh maybe a little bit more let's try 30 pixels and that looks pretty good okay let's set up and i roll for the top right now so i'll change this class here to tool tip arrow top dash right save that and i'll duplicate this top left selector change it to top right and we want this over on the right so i'm going to get rid of this left property and instead add a right property set that to zero and that's looking pretty good and we have the same top property on all of these arrows so let's remove that duplication by using a attribute selector which will select any elements which have a class containing tool tip arrow dash top thereby selecting all of these three classes here so what we can do here i'm just going to add a comment here which says top arrows we could add square brackets here and we're going to use an attribute selector and we're going to target the class attribute so we'll add class star equals and we'll add tool tip dash arrow dash top so this is going to select all elements which have a class which contains this phrase here so this is going to select this class this class and this class as well so then we can just add our top zero here and remove that from the other three selectors and save that and that's not working because we also need to add the and symbol here because this class is going to be on the parent q tool tip component and not on this arrow div so we'll save that and that seems to be working let's just make sure all of our top arrows are working so with the class of tool tip arrow top we see an arrow at the top center and if we add dash left we see an arrow on the left and if we add dash right we see an arrow on the top right [Music] let's set up some bottom arrows now so i'm going to change this class on our tool tip to tool tip arrow dash bottom save that and then i'm going to duplicate all of these top arrows styles and rename this comment to bottom arrows and change this attribute selector here to arrow dash bottom and change these to bottom as well and save that and we don't want these arrows at the top we want them at the bottom so i'm going to change this top 0 to bottom 0 save that and that arrow is now at the bottom so let's see if our bottom left and bottom right classes work so i'll add dash left and that looks okay and dash right and that looks good too okay let's set up some arrows for the left hand side now so i'll change this class here to tool tip arrow dash left i'm just going to copy these first two selectors and this comment paste them here change the comment to left arrows and change this class here to dash left and also change this selector here to dash left so we want this arrow over here and we're going to have to rotate it differently so that these pointy arrows are on the left and right hand side of that div instead of at the bottom and top of that div so i'm going to copy this transform property from our arrow selector and i'll paste that in here and instead of minus 45 degrees we're going to rotate this 45 degrees and we want this position right on the left so i'm going to change this left 50 to left zero and we no longer want to use translate x to put this in the horizontal center we want to use translate y to put it in the vertical center so i'm going to change this translate x to translate y and save that um we also want to get rid of this bottom property and instead set the top to 50 save that and that looks like it's right in the vertical center there so let's create some arrows for the left top and the left bottom as well so i'm going to change this class here to left dash top save that we'll create that class here so tool tip dash arrow dash left dash top and then our and symbol uh let's set the top to zero to put it at the top and that's a little bit too far so let's try 20 pixels and that looks pretty good so let's duplicate this and set up our tooltip arrow left bottom class for an arrow that's at the bottom and we'll change that class here to dash bottom save that we want this positioned at the bottom so let's set the bottom to zero and that's not working because we still have this top 50 percent being applied to all of these classes so let's move that down to our default left arrow in the middle selector maybe we need to set this bottom property to a negative value so let's try minus 20 pixels uh that's too far let's try minus 10 pixels uh that looks pretty good so let's make sure all of these left arrows are working so tooltip arrow left gives us an arrow on the left in the middle tool tip arrow left dash top gives us a left top arrow and bottom gives us a left bottom arrow so let's change this class to dash right and set up some arrows for the right hand side so i'll duplicate these left arrows styles replace left with right i'll replace left with right here as well and in all of these selectors i'll save that we want this on the right so let's change this left zero to right zero and that's over on the right let's see if right top and right bottom work okay so right dash top and that's not working and that's because we need to move this right property up to this general selector which is selecting all of these let's try that again and we should probably do the same here actually i'll move this left property up to that one okay so let's see if right bottom is working uh let's just check the default right one again that's okay let's just double check our left ones so left and then left dash top left dash bottom okay they're all working now [Music] let's set up a prop for our tool tip so that we can easily change the position of the arrow so when we use our tool tip we can add a prop such as arrow and set this to top right and we'll see an arrow up here for now i'm just going to remove this and jump back to tool tip dot view and we'll set up this prop so we need to add a props object and we're going to add a prop called arrow this is going to be a string so we'll set the type to string and let's set a default value in case the user doesn't provide the arrow prop so we'll set the default to top and instead of hard coding this arrow class here on the queue tool tip we'll cut that and we'll bind to the class attribute and we'll output tooltip arrow dash and then whatever's been provided in this prop so i'll just add dollar curly braces and then arrow and save that and you can see if we don't provide the arrow prop we do see the top arrow by default so let's jump back to index.view and see if we can place the arrow in our 12 different possible places so i'll add this arrow prop and i'm back on index.view here so let's add the top value and that's working let's try top left that's working top right let's try the bottom ones so bottom bottom left bottom right uh let's try the left arrows so left is working left top is working left bottom let's try the right the right arrow is working right top is working and right bottom is working too now if we jump back to the q tool tip page on the quasar site so components and tool tip then this component has some positioning properties such as anchor and self so anchor determines the position of the tool tip relative to its target element or component and the self prop determines the position of the tooltip itself and with these props we can actually pass in two separate words such as top space left and top space middle without needing to add the dash that we currently need to add with this prop so let's use our computed property so that we can do the same thing with this prop so that we can pass in something like right bottom like that i'll just put that dash back in for now and we'll jump back to tooltip.view uh let's set up a computed property so we're gonna need our setup function and we're gonna need to pass in our props so we can get access to them i'm just going to add a block comment here which says arrow class and we'll set up a computed property called arrow class so i'll add const arrow class equals computed and we need to import the computed method from view so we'll import computed from view and so if the user passes in something like right space button then we want to replace that space with a dash so i'll set up a variable here called arrow class corrected what we'll do is grab the value in this arrow prop and replace any spaces with dashes so we can just set this to props dot arrow dot replace uh we want to replace any spaces with dashes like that and for now we'll just return this so return arrow class corrected and we also need to return this computed property at the end of our setup function so i'm going to add another block comment here for our return statement we just want to return this arrow class computer property and instead of spitting out our prop here let's split out this arrow class computer property so i'll change this to arrow class and save that and let's see if that's working so if we add right dash bottom that's still working but if we put space here instead of the dash then hopefully that's still working and it is now let's just try a few others so top left top right and yeah that all seems to be working um we should probably add some error handling to this in case the user enters a value here which is not going to work such as top center or something like that so i'll just undo this and jump back to our computed property after this arrow class corrected variable i'm going to set up a variable with all of the allowed classes so we'll call this allowed classes set this equal to an array and we'll just add all of the allowed classes here so we got top um top left and top right then we've got bottom bottom left bottom dash right then we got left and left dash top and left dash bottom then we've got right right dash top and right dash bottom i think that's all of them and then we can just check if this array includes this arrow class corrected class and if it doesn't then we can return an error so we can do if not allowed classes dot includes arrow class corrected so if what the user has entered here after it's been corrected and the dash is put back in is not included in this array then we want to return an error so we could just do console.error and i'll use a template string here so we can just output something like value and then quotes and then we'll spit out the value they've provided so arrow class corrected so value and then the value they've provided not allowed for arrow prop and i'll put that in quotes as well arrow use one of these and then i'll put brackets with or without dashes and then we can just output our array of allowed classes so allow classes and if what the user entered in the prop after it's been corrected is in this array then we'll skip over this if and we'll just return the arrow class corrected so i'll just save that and make sure this is working so i'll open up the console and if we provide something here that's not going to work such as top center save that then we can see that error value top center not allowed for arrow prop use one of these with or without dashes and then we see all of the possible options uh let's just make sure this is still working with correct props so top that's working top left it's working top right ah yeah they all seem to be working let's add a bunch of buttons to our page so we can showcase all of our different tool tips so far so i'm just going to reset my zoom to 100 i'm going to get rid of these flex classes on the q page and just add a padding class so we have a bit of padding so q p a dash md i'll save that uh let's stick a heading at the top here so i'll add a div with a class of text h5 i'll just put top arrows in here save that uh let's add some margin to our button as well so a lot of class of q dash m a dash lg and save that so let's showcase our top arrow first so i'll change the label in this button to top arrow and i'll change this arrow prop to top and to make this appear when we hover over the button i'm going to remove the model value prop and the no parent event prop as well save that okay let's duplicate this button and change the label to top left arrow on the button and change the arrow prop to top left save that and that's working let's duplicate this button change the label to top right arrow change the arrow prop on the tool tip to top right so we can now see all of our different top arrows so let's duplicate these three buttons and that heading we'll add a heading which says bottom arrows save that and i'll add a bit of top margin to this heading so q dash mt dash md maybe lg actually save that so on the first button i'll change the label on the button to bottom arrow change the arrow prop to bottom and then we'll do bottom left arrow and bottom left for the prop then bottom right arrow bottom right for the prop save that we can see the arrows but since these arrows are now at the bottom we probably want to position this tool tip above the button instead of below it and we can do that with the tooltips positioning props so we can use this anchor prop and this self prop so we probably want to set this anchor prop to top middle so let's just try that out on the first tool tip here so we'll set the anchor to top middle save that we also want to use the self prop which i think we want to set to bottom middle so let's see how that looks bottom middle save that and that prop should be called self and not bottom so i'll change that to self and that's looking good now so let's add the same props to these other two tool tips so add those here and here save that uh we can now see all of our bottom arrows so let's showcase the left and right arrows so i'm going to copy this heading and paste it down to the bottom [Music] and i'll just copy this button and tool tip um change the heading to left and right arrows paste that button and tool tip there save that change the label to left arrow save that we probably want this tool tip positioned over to the right of the button so i think we want to set this anchor prop to center end so we'll set this anchor prop to center end and of course we want to set our arrow to left save that and we also want to set this self prop as well i think we want to set that to center start and that's looking pretty good so let's duplicate that and add our right arrow so we'll change the label on the button to right arrow change the arrow to right and we want to set the anchor to center start i think and we want to set the self prop to center end save that and that's looking pretty good i'm not going to add the left top left bottom right top right bottom buttons but feel free to do that if you want to and if you found this video useful so far do me a favor and smash the like button i'll leave a comment telling if you would have created these tool tips [Music] differently let's add a programmatically triggered tooltip to this showcase page so i'm just going to copy one of these headings and paste it at the bottom we'll change the heading to programmatically triggered i'm just going to copy the first cue button and tool tip i'll paste it down here and i'll change the label on the button to click to toggle tool tip save that right now this tooltip is going to show every time we hover over this button so to stop it doing that we can use the prop we used before no parent event on this tool tip save that and we now no longer see the tool tip when we hover over the button and if we want to show this programmatically all we need to do is add a v model to this tool tip and when the value of that v model is false then it won't be shown but when it's true then the tooltip will be shown so let's jump down to our script section and we'll add our setup function and we'll set up a ref variable here so we'll add let show tooltip equals ref and we'll set this to false by default and we need to return this show tool tip and we also need to import the ref method from view so i'll add that here and now we can just set the v model of our tool tip to this ref here so a lot of v model to this tool tip and set it to show tool tip save that refresh so if we set this value here to true then we should see the tooltip which we do so i'll set that back to false and we'll just add a click handler to this button here so up click and we'll just set this show tooltip ref to the opposite of itself so if it's false set it to true and if it's true set it to false so we can just do show tool tip equals the opposite of show tool tip save that and hopefully we can toggle this now so i'll click on the button and we see the tool tip i'll click again and we see the tool tip disappear [Music] let's create a tool tip which disappears after a delay that we specify with a new prop now there is a prop on quasar's tooltip component this hide delay prop which will make the tooltip disappear after a delay however it doesn't work if we're showing our tool tip programmatically like we are in our latest tool tip here so if i add this hide delay prop to this tool tip and set it to 2000 and save that and we show the tooltip then the tooltip never disappears so this prop only seems to work when we're showing our tooltips on hover like the rest of our buttons so if i cut this prop i'll put it on the previous tool tip save that so that's this one here and this hide delay only kicks in after we move away from the target element so if i move the cursor away then after two seconds the tooltip disappears but i'd like to be able to make our tooltip disappear after a delay even on programmatically triggered tool tips like this one so let's set up our own prop so i'm going to jump back to tooltip.view we'll add a new prop called duration and this is going to be a number so i'll set the type to number and set the default value to null because we don't want it to disappear after a delay by default let's add a new button to our page so i'll duplicate this bottom button let's set up a new ref for showing this tooltip so i'll set up another ref here called show tool tip with hide we'll set that to false by default and we'll return it at the end here show tool tip with hide and we'll set the v model on this tool tip to show tooltip with hide and i'll change the label on this button to hide tool tip after delay and we'll update the click handler as well and we'll just set show tool tip with hide equal to true to show the tool tip so let's make this guy hide after a delay which will pass in like this duration equals 2000 save that and i'll jump back to tooltip.view so we're going to need a set timeout with the duration set to the duration being passed in with this prop so after this tooltip is shown we want to start that set timeout and when that finishes we want to hide this tooltip however we can't just add this set timeout to this setup function directly because this setup function will be triggered for all of our tool tips straight away when the page loads so just to demonstrate that i'm just going to log out setup and save that and show the console so if i just reload the page so we can see setup is being logged out 10 times for all of our tool tips now we seem to have a warning here from our layout toggle left draw was accessed during render but not defined on instance so i'm just going to open up main layout.view and search for toggle left draw uh yeah it's a click handler on this button uh let's just remove that button actually we're not going to need it and i'll save that and close that and back to these fading out tool tips so we can't start our set timeout directly in the setup function we need to wait until the tool tip has actually been shown and if we jump back to the tooltip api section and jump to events then we have this show event which will be triggered when the tool tip is shown so what we can do is we can add an event listener to this q tool tip so at show and then we can fire a method when that event is fired so we'll fire a method called on show we need to create this method so i'm just going to add another block comment here and i'll set that to event on show and let's create that method so const on show and we'll set that to a method an arrow function for now we'll just log out on show we're going to need to return this method so we'll add that to our return statement on show let's save that and see if that's working and i'll just remove that console log we added to the start of the setup function as well so i'll reload that clear the console click on this button and we can see the on show method being fired when the tool tip is shown so let's jump down to that on show function so first of all we want to check that a value has been provided to the duration prop so we can do if props dot duration and if they have provided a duration then we want to fire a set timeout function and we want to set the timeout duration to the value that's in our prop so props dot duration when that's done we want to hide the tool tip so i'll just log out hide tooltip for now so i'll save that reload clear the console click on the button and after a couple of seconds we see hide tooltip being logged out but how can we actually hide the tool tip well if we jump back to quasar's tooltip page and methods then we have this hide method that we can trigger on the tooltip to hide it but first we need to get access to the tooltip component so we're going to have to add a ref to it so a lot of ref and we'll call this tooltip ref and at the top of our setup function i'm gonna add another block comment here which is called reusables uh we'll set up our ref here so let tooltip ref equals ref set that to null and actually that should be a const i'm going to need to return this tooltip ref so let's add that down here tool tip ref and save that so we can now get access to this q tool tip component at tooltip ref dot value so let's jump back to our set timeout in the on show event and to get access to the tooltip component we can do tool tip ref dot value and then to hide the tool tip we just want to fire this hide event so we can just do tooltip ref dot value dot hide and hopefully that should do the trick so i'll save that reload we have an error ref is not defined so we need to import ref from view so i'll add that to this import statement save that and reload and if i click on this button we should see the tooltip and hopefully see it disappear after two seconds because we're passing in two thousand milliseconds here so let's see if that's working and yep seems to be working now now let's just make sure it doesn't disappear if we remove that duration prop so i'll remove that and save and reload and yeah it's not disappearing so i'll put that prop back in and save that [Music] let's create a tooltip with a close button that the user can click to get rid of the tooltip uh quasar's own tooltip component doesn't have this functionality so this is going to be a brand new addition to the component okay so let's jump to tooltip.view and we'll set up a new prop first called let's call it closable and this is going to be a boolean prop and we'll set the default to false because we don't want the close button added by default so i'll save that and we'll jump back to index.view and we'll add another button here so i'll copy this last button and i'll change the label to tool tip with close button and we'll set up a new ref for controlling this tool tip so duplicate this one we'll call this show tool tip with close and we'll also return that in our return statement save that and we'll update the v model to show tooltip with close and we'll change show tool tip with hide on the click handler to show tool tip with close i'm going to get rid of the duration prop um we'll add this closable prop and save that reload i'll just make sure our tooltip is showing which it is so let's jump back to tooltip.view let's add a close button to this tooltip but only if the closable prop has been provided so i'm going to place this inside the div with our text which is here so after this slot here we'll add a cue button um we only want to display this if the closable prop is true so we can add v if closable i'll set the icon to close which should give us a nice x icon and i want this absolutely positioned to the top right of the tooltip so a lot of class of absolute top right save that and i want it to be a bit smaller so let's set the size to sm and we'll add the dense prop and we'll also make it round as well with the round prop and save that now let's see if we can click on that button and right now we can't click on it and if we inspect our tool tip which again is being added to the end of the body tag here it currently has this no pointer events class which is removing all pointer events from this tool tip so we're going to need to override that so let's add another class to this button of tooltip dash close we'll add some style for that so i'll jump down to the style section and i'll just collapse this arrow selector and this text selector we'll place this here so i'll add and dash close to target this button and we'll set pointer events to all and save that and let's see if we can click on it now uh yeah we can now click on this button and i don't know why it's moving a little bit when we click on the close button but maybe we can fix that by adding dot prevent to our click handler when we add a click handler to this close button so i'm going to jump to this button and add a click handler so at click and we'll add dot prevent um we'll fire a method called close tool tip and we need to create this method so i'm going to add another block comment here i'll just put close tool tip and we'll set up our close tool tip method so const close tool tip equals a method uh we'll just log out close tool tip for now make sure that's working um we need to return this as well so we'll add that here close tool tip save that reload show the tool tip and click the button and we can see close tool tip being fired and this tooltip is still moving when we click the button i don't know why that's happening well maybe it'll stop happening when we actually hide this tooltip when we close it and to hide it we can just do exactly what we did here just fire the hide method on this tooltip ref value which is attached to the cue tooltip component so we can just do tooltip ref dot value dot hide and i'll save that let's see if it's hiding i'll reload click on the button and click on the close button and we see the tool tip hide and it's also no longer nudging over to the right as well which is good [Music] let's finish off this badass tool tip by making our background color and text color customizable so first let's set up some props for background color and color so i'll add a new prop called bg color and this is going to be a string and we'll set the default value to the color we've been using which is gray dash 10 so we'll set the default to gray dash 10 let's add another prop for our color for the text color this is also going to be a string and we'll set the default to white and we need to make sure our elements are using these props because right now we have these hard coded classes bg gray 10 and we don't currently have a class for the text color that must just be coming from the quasar tooltip component so let's remove this bg grade 10 from the class attribute and instead we'll bind to the class attribute and output bg dash and then whatever's in the bg color prop so dollar curly braces and bg color and we need to do the same thing on our arrow div in fact i'm going to make this a self-closing div split the attributes bind to the in fact i'll just copy this class attribute paste it there and remove this hard-coded class and we also want to add our text color class to the tooltip text div so we'll add that here so text dash and then we'll spit out the color prop and save that uh let's make sure our tool tips still look okay uh if we just change these classes i'll change that to red10 uh let's say blue save that and yeah that seems to be updating so let's change these back to white and gray dash 10. so let's add a bunch of tooltips to our page with different colors so i'm going to jump back to index.view i'll copy one of these heading divs paste that to the bottom change the text to custom colors i'm just going to grab the first cue button and tool tip and paste that here and save that so let's create a tool tip with a white background and black text so i'm going to change the label on this button to white and black and we'll jump to our tool tip and set the bg color to white and the color to black save that and that's working uh let's do a white and pink tool tip so i'll duplicate this cue button and tool tip change the label in the button to white and pink uh change the color prop to pink save that we can see white and pink uh let's do a red and white tool tip so i'll duplicate these again change the label in the button to red and white change the bg color to red and the color to white save that and we can see that uh let's do a purple and white one so again i'll duplicate these change the label on the button to purple and white change the bg color to purple save that and that's looking good um we can also of course use all of the colors from our theme so primary secondary positive and negative so let's add those as well so i'll set the label to primary set the bg color to primary save that we'll do secondary change the label to secondary change the bg color to secondary uh let's do the positive change the label to positive change the bg color to positive let's do negative as well so i'll update the label to negative and the bg color to negative as well save that and we can now see tooltips made up of our theme colors you can grab the source code for this tool tip at danny's dot link slash badass tool tip code and i'll put the link in the description and let me know in the comments if you would do anything differently with this tooltip component or if you can think of any other ways we can improve this component please hover over my face over there if you don't want to miss any of the videos in this series thanks for watching and i'll see you in the next one [Music] you

Channel: Make Apps with Danny

Views: 2,037

Keywords: android, app design, app development, app development process, app ideas, app success, building an app, cordova, create a real world app, create an app, creating an app, css, electron, firebase, firebase cloud firestore, how to create a successful app, how to launch an app, how to start an app business, html, ios, javascript, mac, make money with apps, quasar, quasar framework, quasar framework tutorial, real app, real world app, successful app launch, vue, vue.js, vuejs, windows

Id: WQNg3_5u-ZM

Length: 59min 25sec (3565 seconds)

Published: Wed Jun 02 2021