Create a Tooltip Component in React using Styled Components

[Music] what up people so in this react tutorial i will be creating a tooltip component so i guess i'll show you a demo so when i hover my mouse over any of these you can say you know it can be a div a paragraph a button whatever you want it will show you a tooltip so we have one on the left we have a top we have a bottom we have a right and then also i can tap my keyboard uh tab button and then as you can see i can cycle through these and also show me the tooltip so you can use this anywhere you want and without wasting time i guess let's get started okay so here we are with a pretty much blank code sandbox project and what i'll do is i'll come over here and get rid of all of this so that's gone the other thing i have done is i've installed style components as one of my dependency that is the only dependency i need so you can come in here and type it it will come in here so i'll close this off and then i'll come here and create a folder we will call it components this is where i'll be putting all my i guess components this is the personal preference within that i'll create two uh two components so one will be styled r.js and then the second one will be tooltip dot js so the style.js is going to contain all my uh style components and tooltip digest the actual uh i guess component it's just a separate them out you can put them in one file no problem so the way this is gonna look like the tooltip is we're gonna have a this tooltip i'll create endless for starters just return let's just say h1 tooltip and then i can come here and i can export this out okay back in my app.js i can actually use it okay so great so our tulip is coming here uh which is good let's save everything and then i'll come here and we can start talking about how we are going to organize this so let's do the parentheses so the first thing we will have is a tool tip actually you know i'll comment this so that we don't get these errors so the first thing we will have is a tooltip a wrapper this is going to wrap pretty much everything the target and the actual tooltip so we need that then the second thing we need is the target so the target is as you guessed it what the tooltip will be shown against so we'll say tool take target [Music] and i'll copy and paste this right and then we also need then the actual tooltip so we can say tooltip let's just call it box and then you know we'll have whatever we need and i'm going to close this off like so and then finally we also need to wrap this tooltip box in its own container i just called it a center container and this will make sure that the tooltip box is nicely centered over the target so i'll just tab this now so we are going to create these one by one but before i do that we need to hook up some events so one for hover and for focus so that we can show the tooltip based on those events so i'll come over here and i'll say const is hovered and then we set is hovered and this will be small and we will call it use state so for now we'll just initially have it false i'll duplicate this and the other one we need is is focused so we will do that and then i'll say focus right so now to get these events from the element we need a reference and to get a reference in react you use something called a use ref so we can say target target ref use ref use wrap not use reducer so we use ref hook and let's just set it to null for now okay now with these out of the way uh we can go ahead and start creating the i guess actual style components so i'll come here in my style.js and first thing we need to bring in is the actual style component so we'll say style from style components and we can start uh i guess cracking away so the first thing we need is the tooltip wrapper so we will create that we'll say tooltip wrapper and this is going to be a styled div and it is very simple actually the only thing the only two things it has it's going to have a position of relative and we will give it a style of inline flex and there's a reason why we have to give it inline flex which i'll show later on because it'll make more sense so so we got the tooltip wrapper out of the way so i guess what i can do is i can come here and maybe just use it so i'll say tool tip wrapper right and tooltip wrapper there we go like so okay so now i need to bring in the tooltip wrapper so i'll come here i'll say tool tip wrapper from styled there you go and that should take care of that error so that's one now we need to create the target so let's create the target very quickly i'll come over in come over in my style components and create the tooltip target so same thing const tool tip target and it says style dot it's going to be a button the reason why we want to have a button so we can do the focus thingy with the tab key if you don't want that then you can just create a span or a div no problem okay so this will be very clean because we want the target to inherit pretty much everything from his parent because we don't want to change someone's style so the border will be none and then we are going to have a background of none since the button i wanna just keep it nice and clean and let's give it some padding and then a negative margin minus one pixel and also we will just say inherit the color and we will say also cursor cursor inherit and let's just make it flex so this is our this is our target so i can save this and then go back in here and i can grab the target so i can say tool tip target and we can just say like that and of course i need to bring this in so i'll say tool tip target that should make this happy and i can actually so i'm gonna get rid of this because you don't need this and what i can do is i can go back to my apps so i got my tooltip here so what i will do is i will actually just start using this so you can see the changes so that's my tool tip so i guess i will need to pass in some text so for now i'll just say i am a tooltip right and then we need to say tool tip target we need some kind of target and i will say i am target like so okay so with that done then i'll come back here in my tool tip and let's see if we can uh so i guess the whatever first of all whatever you're displaying in between this is the comes with the child so or children i guess so i can come here and i can start def referencing these so one thing i will need is the text and children and then i can come here and i can say chilled run like so so there you go that's your target it's coming in through and the other one is text but that text is going to go in the actual uh tooltip so we're not gonna use it for now but i put it in put it in just in case now also the tooltip is going to have a position so i guess i'll just might as well do that here and i can just say position so for now we'll just say top but you can of course change it so i'll save this and no errors nothing these errors are i guess from before so we're gonna ignore these i'll come here back in my style components and we can start creating these next thing which is the i guess the center container that is going to actually center the utility box when we displayed over the target so we will come over here and i'll say export const center container style.div okay so here's where the power of style components come in which you will see so let me just throw in a little bit of css okay so with these uh css done basically all i'm doing is just defining a position some width some margin and display and left and everything and these one i to dial in i i just had to practice i mean i just had to play around with them through trial and error so that's what i got now so as i said the tooltip is going to have a position which we passing through here so we need to take this position somehow and we need to pass that through over here to the style components so we can create a switch here so i'll come in here and the way you can do this in uh start components is coming here we can define this and then i'm going to call dereference this so let's say it could be a position then i can close this here okay and once you have done that then you're you're basically just calling this function and you can do like so okay so then i will create my switch and i'll say based on the position we will do some things okay so case bottom so when it's bottom then you know you just play it on the bottom so you just change the css so that it can be displayed on the bottom so i'll say return and the way you do this is a css with these sticks and we will say you know what onset the bottom right and from top give it a 100 plus 5 pixel so you do that and the reason why we're unsettling the bottom is because we've already defined it here so i want to unset it now it's giving me these uh i guess errors or something yeah because it doesn't have a default so we'll get to that but i guess it looks ugly so maybe i should uh i should do the default so i'll say default and we will say return css and i will come here i'll say bottom calc 100 that's 5 pixel now it's complaining about the css but that's because i haven't brought it in so i'll say css that should make it happy and it did all right so i have i have my bottom and then i think i need i need one for the left so i'll say left and we need to return some css same deal and i think i'll just do one for right as well and actually yes that's fine and we'll return css from here so that should take care of this and i need to spell my return properly okay here we go okay uh so what's going on here and then i have my left so let's take care of the left and i'll just push this in okay so for left i'll just throw in some css okay so we're done with that and once you can see the the colorings off i mean something's wrong and i missed this as a semicolon so basically you uh now for the left you what you do is you know you set the margin left to zero so we're very close give it a 100 width unset the left and set the top and right but the width is max content because we don't want this thing to uh you know um wrap around so we want just to overflow i mean go depending on the content it will pretty much just fill the entire container and i'm just going to do the same thing with the right right side so i'll type in some css okay with that done and these numbers five pixel that i'm adding here uh i actually just found them through you know just playing around with different values so uh you know that this made more sense for me so with that all done uh i can save this and looks like everything looks okay for now and so let's also just go in and actually if i go back here here's the center container and i'll leave this for now because we need to now create the actual tooltip box so let's create the tooltip box next so back in install components i will come here and i'll say export cons tool tick box is equal to styled expand i'll just make it a span and let's type in some css here i guess okay so with that css all done uh what we can do is create now the pseudo component and to do that install components you create just typing the ampersand and then after like so so that's how you can create the suit component and we will just have a no content and in the rest of the css okay so that's for the so this pseudo component is for that arrow that uh shows up on the tooltip and now i'll just use the exact same technique that i did here using the whoa using the switch and then type in the rest of the css for the top bottom and left position so i'm not going to bore you with that i'll just type that in and i'll be back okay so i type that okay so i typed that in as i said it's nothing but just the same deal we pass in the position and then based on the bottom we you know change the arrow i guess whichever we want to show so the other transparent just just the bottom one is showing and then the same the same deal happens for the others so you can look through these it's very straightforward just normal css and let's start actually using this over here so i can come here and start using this so i guess the one thing we need is some kind of a value which uh we can use to show the tooltips so i'll just say show const show tooltip for now just make it true but this will actually but this will actually be controlled by this hover or if we are focused if we hover or focus then we want to show this tool but for now let's just make it true so we can always see the tooltip because we're testing this uh so now that i have that i'm trying to children and within the wrapper we will come here and we will say if we are you know to show the tooltip then what you can do is you can start rendering so the first thing we'll do is that center container i'll bring in that and we need to pass the position to it remember we did that position the switch thing now where's the position coming from well the position is going to be passed in through here so i'll say position like so and then i'll wrap this so we have that all nice and wrapped of course it's complaining because it doesn't know where it's coming from i guess i'll come here and break this on separate lines and then i'll say center container like so so okay that works then we need the tooltip box so we'll say tool tip box okay same thing we need to pass in the position and here we can actually use the text that was passed in to us and we can say toolkit box and it's complaining again i don't know why it doesn't bring it by itself with the box okay so oh there you go so we can see the tooltip actually showing up but for some reason it's hidden so i need to maybe change in some css over install.css to bring it down okay so just to make that make that happen i will come here in my install css excuse me and i'll say display flex and we need to justify the content and center actually i don't need this and then we will say align items center now this won't work until you give it some height so we'll say height of the entire view height there you go that's a nice trick if you want to center something in your um in your viewport so there you go that's your tooltip now now the thing is it's always showing up and we can easily control that through remember we set here so i'll say you know is hovered of course that's false and nothing is happening because we're not hooking the remember that reference we're not hooking that into the actual target so we need to start doing that so what i will come here in my tooltip i'm going to close this and what i can do is in my tooltip target i guess we need to hook in uh these events so the first thing you say on mouse enter right what i want to do is i want to execute this set is hovered to true right then the other thing i want to do is on mouse leave i want to call this function and i want to set this to false so let's see what that does for us so if i come here nice as you can see on mouse enter it's showing the tooltip on mass out it's uh it's going away so knife i tab uh nothing is being shown currently so we need to fix that so i'll do on focus right that's the event used for that it will say set is focused to true right and then we'll say on blur same thing but we just set it to false set is focused false like so so let's see if that works i'll save there you go that works now the one problem is that i see you see it's not going away after after we have tabbed away or so the one thing i'll do is i'll say on click i'll use that and i'll say you know handle so somebody clicks on it we want to dismiss that that tooltip so for that i'll create a listener okay so one thing i realized that i'm calling it blue instead of blur so that could be one reason let's refresh and see so that's working on hover then i'm going to tab it and i click yeah there you go so that works and also what i see is when i tap tab away the outline it's not going away either so we need to fix that as well so what we can do is we can pass in the show i guess what we call the show tooltip actually let's call it show on focus and i'll be type into d is focused okay so we can come here in the tooltip target and we can start using this so we can say here you can dereference it and we can say show on focus right and then we can just call this function and you can say this is that some i call them you can say if not show on focus right then we return some css well actually it'll be this yes that'll be replaced with we'll just say outline none so let's see we need to add this here and and we need to close this off like so and there you go uh looks like something went wrong so let's see what happened oh some internet problem i'll fix that okay i'm back just a network glitch so the issue that i found was that the f here is it was actually what we had here is all caps the f where did it go right here but here i was using small so i fixed that so now if i come here and tab and tab away so the outline is going away as you can see the tool tip is staying and one of the reasons behind this is i'm using tooltip target from the actual style components which is totally wrong we need to take this out and have our own style components so then i'll say first style from style components and then quickly we can say tooltip target just create something for now span or div whatever you want uh yes we need to do this so now if i come here i tap tab away as you can see it's working nicely i can hover over it so now let's say you have a paragraph and you want to use this tooltip on a just one word how do you do that so i'll come here i'll create my paragraph and i'll say i am a tool tip within a pair graph right like so i'll close it so now let's say i'm going to have my tooltip on this exact word so i'll cut this out and i'll replace this with that so let's organize first everything okay it's not organizing the shortcut so i will come here and first of all this add this right i'll give bring this a new line and then i'll do the same here okay and then for this one i'll say tooltip so now when i come here i say i'm a tooltip see i'm a tool tip so it's only on that word so that's how you can use it on any html element if you want now one thing you might see is the font size the same as the rest of the font and that's because i came here and on the tooltip target i had to set the font size to inherit also which i forgot if i remove it watch what happens it goes like this and it's out of sync with the actual target so we don't want to touch the target we want to leave it as is that's why i'm inheriting pretty much everything so that's how it works i hope that helped and please subscribe like and if you want any more tutorial just shoot me a line bye for now

Channel: Grepsoft

Views: 1,295

Keywords: react, styled components, html, css, vue, angular, grepsoft, components, tooltip

Id: xacxCb6T4Wk

Length: 27min 12sec (1632 seconds)

Published: Tue Jun 08 2021