Useful Tooltips: CSS Tutorial (Day 18 of CSS3 in 30 Days)

Key Takeaways

hello everybody welcome back to css3 in 30 days today is day 18 and we're going to be coding up some css3 tooltips let me show you what that looks like right here in the browser we have the final result down here and the tooltip is essentially a little element that just appears in some position around the element to let you know a little bit more information the purpose of a tooltip is not to look fancy but specifically to help the user understand something about what they are interacting with so from a usability standpoint let's say this little pink box i have here is an acronym and you want to be able to let them know what that acronym stands for when you hover over it maybe the tooltip lets them know what it stands for or maybe there is an element a call to action where if you hover over it it lets them know additional information to help them understand how to interact with that element a little bit better there's an endless amount of reasons why you might want a tooltip but the purpose of this lesson is not necessarily to show you the why of the tooltip rather the how to make a tooltip so let's jump in and start making tool tips so in this final result i'm just going to show you what we're going to make we've got this top tool tip this right tool tip bottom tool tip and left tool tip all we're going to do is we're going to coat up these these little elements it's just something to hover over and then we're going to make a global tooltip style and then we're going to start positioning them depending on where you hover all in css that's the exciting part about this a lot of the times tool tips are made using javascript or jquery but in this case just css3 because that's how we roll in css3 in 30 days over here in the code editor we have our 18 tool tips take a moment to go and download that and open up your index and sandbox final.css is always there for your reference as you go along if you mess something up or if you're confused about something that should help you out otherwise let's get started here in the index i'm going to show you what the markup looks like because it is a little bit important because we're going to be styling it so in the sandbox here we have just some divs and the div they all have the class of tool tip and then the position of where it will be so the class is simply top right bottom and left they all have the class of tool tip the other thing is there is a title attribute with some text i've just said to tooltip on top right and so on and so forth and that is really it for the markup in the sandbox we're going to get started and we're going to style our tool tip element itself so the the the target that we want to hover over so we're going to select tool tip and then we're just going to say position relative this is important because we're going to be positioning that tool tip itself so right now we're positioning the parent element that we call tooltip but it has to have a position of relative or absolute whichever one you choose in this case we're going to use relative so it doesn't move around in weird places and that's simply so that when we position the tooltip itself using the before and after virtual elements we need to have it stay contained within its parent so position relative is very important in this case height 60 pixels again this is just the target we're going to hover over i'm just jamming here 250 pixels background we're going to use that the pink color that branded pink that's f2395a whatever color you want it really doesn't matter this isn't functionality this is just some this is just vanity styles here text align center we're going to line height the text in the center of it to 60 pixels which is going to be the same as the height so it's vertically aligned as well as center aligned because of text align center font size something large and readable 18 pixels margin zero auto and that's how you style a target element boom just like that nice okay let's go back to the uh the sandbox here and let's get coding up the tool tip itself so we're going to just say tool tip but we're going to actually select the before pseudo element this whole time i've been calling them virtual elements i think i made that up maybe i didn't but the idea is that it is a pseudo element it's not a real element it's kind of an element that doesn't really appear unless you make it do something so it's just a funky little uh css trick again i've been calling them virtual elements this this whole time and i think i made that up but we still got the job done right brad right brad position we're going to position absolute because we want to move that around freely outside of the flow we don't really want position relative to be messing with it so position absolute's going to give us more flexibility z index 2 just a little bit above the default which tool tip will be at zero and then this one will bring it up just a little bit we don't want it to be behind its parent element display none by default width 200 pixels padding 10 pixels so something nice and simple font size i'm going to go 0.8 that's eighty percent of the parent elements font size which is eighteen pixels so eighty percent of the uh eighty percent of that whatever whatever that number is line height one point four m let's try that and border radius we're going to say 5 pixels slightly rounded background color we're going to go with an rgba something you could see through simply a 0 0 0 and 0.8 so it's black but 80 alpha channel so a little bit transparent color white that's the text the content this is cool content used with the before and after pseudo elements to generate content specific text within an element so we've been using this a lot uh in this way but they're actually gonna this means you can actually put text within the element we're just putting an empty string because uh it allows that after element to appear so we still need to have content within the pseudo-element but we're actually going to have it display real content this time not just an empty string so we're just going to do something fun here so instead of an empty string we're actually going to use attribute value that says attribute value for the content property so this is specific a specific value for this property which means we have access to within this parentheses a specific attribute within the html so we want to grab the title that title we specifically put in the html will say tooltip on the right tooltip on the bottom so on and so forth so that is cool dynamic it's not just hard-coded so this will depend on whatever the title is of that element really exciting stuff i'm so pumped okay we're gonna now select tool tip after pseudo element and now before we get move forward let's actually just see if this did anything so i'm going to move over to the browser and it doesn't do anything because we haven't done any styles upon hover so we're going to work on that let me actually let's just do that now so we can so we can make it appear so tool tip hover and then the before so how that works is the tool tip uh the tooltip element when we hover over the tooltip element do something with the before pseudo element so it's a kind of an interesting little selector so display inline block watch this save that now when i hover nothing happens exactly what i wanted now you might be wondering why that little thing pops up when you say that's just the title attribute appearing by default the browser's native uh functionality it shows uh the title just for accessibility but we actually want to make our own so back to the original problem we don't see it i'm thinking that's because okay super silly just realized this i was uh styling here's the problem maybe you noticed this and you were just shaking your head wondering when i was gonna catch it i styled tool tip after pseudo element i meant to style these tool tip before pseudo element and then down here i set on hover show the before element which we haven't done anything with so let's change that to before and top i'm going to take that out because i'm actually going to use that save that and then on hover that should work let's see what happens here there it is okay so the tooltip on top appears there it's at the very it's somewhere in the top right i don't really know what's going on with its position so we need to fix that plus we need to do one little thing i want to show a little arrow pointing towards the element itself so down here in the final example i want it to look like that it has a little arrow so i'm going to create that little arrow with the after pseudo element which i was accidentally styling this whole time so that's going to be like this position absolute z index we're going to say 1 it's going to be above the parent but behind the little tool tip itself and then i'm going to say display none again by default we don't want to see it width 0 height 0 and this is because we're going to make it we're going to make a triangle out of a border like we did with pac-man just recently here so we're going to say border 5 pixels solid transparent so we don't see any of the border and then a little bit later here i'm going to create and display one side of it so let's just leave it at that and then we're gonna say content empty string so that will create an element that we still won't see and we're gonna do something with in a sec so let's position that let's um let's say we're gonna go bottom zero no one hundred percent so the very bottom of the element left fifty percent border top color let's do the same color as the tooltip 0 0 0 0.5 0.8 rgba let's say that and see what just happened okay so i don't see it and that is because we're actually on hover up here where are we right here we need to make the after pseudo element appear on hover as well tool tip hover after so save that but i'm going to put this style after that hover simply because it's cascading i don't want the this style to be before this just in case there's some sort of problem okay so something is happening here so when i hover now you can see the arrow it's the right shape shape and size but it's in the wrong spot so we need to move that in the right spot so what do we got to do to do that it has to be in the center of this element let's start by centering the tool tip itself because it's obviously in the wrong spot it needs to be centered and then above the element so let's go ahead and do that let's go back to the tool tip top before and what we're going to do is we're going to position it now and so we're going to say bottom now if i just said bottom 100 what's going to happen it's going to move it up but i want to add another 5 pixels to that so because the the the size of that arrow is 5 pixels because we said in our border 5 pixels so we want it to be 100 from the bottom but then another 5 pixels now we can't find out that we can't create that with a percentage but i also want to have a dynamic tool tip position from the bottom because that element could be any size if i want to add a tooltip to any element not just a specific hard-coded height so it needs to be 100 from the bottom but it needs to have an additional five pixels and the way we can combine a percentage and a pixel value is through the calc css function so check this out let's go back to our css i'm going to wrap this in the calc function like this but i'm going to say plus 5 pixels that allows us to combine different values different measurements now watch this 100 plus 5 pixels that's amazing how cool is that so now we need to fix that needs to move it over so let me let me do another thing here we're going to we got to move it left let's say left 50 save that let's see what happens okay so now we're 50 over now we're starting to look good 50 over from the left side of the parent element as you can see as well as the little arrow is it's in the bottom left-hand corner of the tooltip but we need to fix that we need to move it back over so how we do that is through a we could just simply say margin left you know you know negative whatever the width is of the element but i want to use transform the reason why is because this is kind of an animated element it's kind of appearing uh you know through a fade and i just want to wanted to use this as an example i could just use the margin left or positioning but here's the deal there i found a really cool article about the specifically what i'm going to do is this and i'll tell you exactly why so translate x so translate the value for the transform property on the x axis which means horizontally so i'm going to say negative 50 now let me show you what it happens and then we're going to go from there so now we're perfectly in the center so i moved it negative 50 of its width over so that it is perfectly in the center the reason why i used transform translate is because this article is a great article i have a link in the final code in the in this in line 58 of the final css with the link to this article it's basically i wanted to know okay why would you want to use translate versus an absolute position or you know using a margin where you can you know negative the amount so it's centered which we've done before well he basically says don't confuse positioning with design emotion so here's an example when you use an element that has an absolute position or a margin you know negative pixel position it's going the browser is going to render that animation if you're moving it at all pixel by pixel so this is cool so in the animation if you were to view the source code and you animated it into that position it's going to go pixel it's going to 2 pixels 3 pixels 4 pixels until it goes from whatever whatever starting pixel to the end pixel pixel by pixel so technically that's pretty choppy especially if you had a really good um retina screen where you can see the little fine details but that's not the best practice how do you do it so it's more smooth so it renders a bit more smooth well you use translate the transform translate where the browser does something like this it renders that animation way smoother so it goes in increments so you can see it goes from the starting of zero let's say and the final the final pixel that you end on is one pixel it doesn't just go zero to one it goes 0.1.2.3.4.5 all the way up to your final position so that it's a really smooth animation so the way arthur i believe is the author here he says don't confuse positioning so i'm moving an element in a specific and static and hard-coded place with design emotion so possibly i'm thinking here maybe our pac-man instead of using uh you know the moving the pixels across the screen maybe i would have used transform translate x to move him across the screen that might be something that you might want to revisit to see if we can improve that instead of using absolute positioning using transform translate so my little rant on why you would use transform translate i'm simply positioning it in an area but because it's gonna be fading in and because you could have it slide up or slide down into position using the transform property is a nicer way of handling its position because it's a bit more dynamic hopefully that makes sense and i didn't go off on a tangent for no reason whatsoever okay so now we've got our tool tip in the right position we want that little arrow to be in the right position so let's find the tooltip after uh and just for consistency i'm gonna move this hover above these styles like so and then down here we're gonna start styling the after so what happens uh let me see i'm going to move down a couple and we said bottom 100 percent and left 50 so that's good but what we actually need to do now is if you can see it needs to be centered properly it's not actually in the center of the tooltip so let's try that transform translate x again and then say negative 50 and i'll see what it does to it so now it is actually perfectly centered this is the same width on the left as it is on the right perfect but it's not below the tooltip we want to be able to see that and that's because let's see if i can do this this is the top border of an element of a five pixel border and so there are three other sides that you can't see so we just need to make the border bottom with zero so that should jump that whole element down so let's try that so we're going to say border bottom width 0. now i could have just used position bottom 100 calc and then extra 5 pixels but i just want to make it easy instead of doing anything else and just say border bottom with 0. so now the border top width is 5 pixels the border bottom width is nothing so that should collapse it down below the tool tip let's see just like i said it would do so that now means that the border bottom of that element is zero you can't it's nothing there taking up space and it jumps that arrow down so that it's just touching the tooltip on the top so there is our top tool tip that's it for that that style right there so now all of them have these styles so that's a little bit of a problem because they need to be a bit more specific so the styles i just styled were for all the tool tips so maybe we'll go back into our css here and what we're going to do is revisit here so the tooltip hover it's going to display all the tool tips on hover we want that but now what we want for for the tool tip top so we want all the tool tips to have these styles but this style is specific to the tool tip top so i'm gonna i'm gonna cut that out and what i'm gonna do is this so i'm going to actually go down to the bottom and i'm going to say tool tip and then i'm going to combine that with the class of top and then the after pseudo element i believe it was before actually was the style we were going for yes so that is the tooltip itself the position of the top tool tip save that okay perfect so now these ones are broken because i'm not selecting them anymore that is more of what we wanted but we also did the after the position of that arrow is wrong so we need to specifically take yes so we're going to take all these styles because that's specific to where it's going to be positioned so now this is just styling all the all of those elements as a as in terms of its look and feel but the position of it we want to be very specific so now down here i'm going to say tool tip top and then the after pseudo element i add these styles so now let's try that tooltip top works great these ones are broken beautiful okay so a quick review we have the tooltip global style just for that pink uh element we have the when you hover the before and after elements will appear um we'll get a display of inline block the default tool tip before styles in fact why don't we just move these up reorganizing my code a little bit here so tool tip and then toolpit tooltip after and tilt it before okay so we've got those three things and then we have tool tip hover before and after then we have tool tip top before that's position to get that in the top center position above the the pink element and then tool to top after which is the little arrow in the bottom in the center that is good so moving on that was the was the bulk of the work i think because now what we're going to be doing is just positioning the we already styled up the tool tip now we just need to position them so that whoops so that the tooltip is on the other right bottom or left and the arrows are in the their respective positions so rolling up our sleeves here we're going to get started let's go down here below tooltip top after give a little bit of space and now what we're going to do is we're going to be styling the tool tip let's do the one on the the right that's the next one tool tip right so those are connected that's a very specific selector i'm selecting the classic tool tip that also has the class of right and before pseudo element now we're going to do is we're going to say top 50 because it needs to be in the center of the element so if we look over here we need that to be centered in vertically so let's go back here and we're going to say left here's what we're going to do so we're going to say left we're going to go calc again the calc function 100 from the left now let's see what's going on here if i save that check it out it's going to be all the way over there the problem here is a couple things it's um we need to have some space for the arrow on that in between the two elements so we're gonna do the calc 100 plus five pixels that will give us that space perfect and the other problem is the the vertical on the y axis the that tool tip on the right is just centered from the top we need to be centered from the the middle of the element that makes sense so we're also going to go transform translate y so it's on the y axis negative fifty percent save that check it out so now we're in the right spot now we need to get that arrow and we need to make that appear properly so now we're going to style tooltip with the class of right and the after pseudo element we're going to say border right color whoops is rgba i don't want to type all this out so i'm going to copy that the rgb zero point ba000.8 and then the border uh we're gonna say top fifty percent so we want it to be down fifty percent and then left one hundred percent so uh let's let's see what that does okay so from the left it's 100 because the parent element is here so left 100 i believe that's the case yep well let's see if i just left zero we'll see what happens yeah so see how it's over here now what the other thing is do you see how there's a little bit of space how it's not actually connected to the left side of the element that's because the other three sides of the border one two and three are invisible they're transparent but the width is still there so i want the left width of the border to be zero so let's do that right now we're going to say border left width zero now check it out now we're right at this the left side now we need to position that to be left 100 like we're originally doing but the problem here is it's not actually aligned in the center of that tool tip and we're going to fix that with the transform property transform and we're going to say translate y and you guessed it negative 50 and that is going to do the trick i believe there it is so the tooltip on the right is done so now we should be able to zip through that was only about three minutes to code that up now our bottom and left should be super easy so let's uh jump down to our bottom so now a little bit of space i'm just gonna space these out a little bit so it's easier to find them good organization so now we're going to style up that bottom so we're going to go tool tip that also has the class of bottom and the before pseudo element the top we're going to need to let's see look at here so in the bottom it needs to be 100 down from the top so top will be calc we're going to do calc again 100 plus the 5 pixels for that little arrow now we're going to do is we're going to go left 50 because we want to be to be centered but that's going to create a problem again check it out it's going to be left from the left side we need to to take off half of the of the width so it's center so we're going to use that transform and we're going to use uh translate on the x-axis translate x and then that's going to be negative 50 percent save that that should get us in the center looking very nice now we just need to position that after pseudo-element tooltip bottom after okay top 100 left fifty percent we're gonna go border bottom color because we want it to appear now rgba zero zero zero zero point eight save that let's see what we got so i can see it there it's right there but it's not centered in the middle of the tooltip and it needs to be up 5 pixels so maybe you guessed it border top width 0 and transform translate x negative 50 percent save that refresh tooltip on the bottom that's looking nice and last but not least tool tip on the left so we're going to give a little bit of space in between here we're going to say tooltip also with the class of left and the before pseudo-element this is kind of like repetition now at this point you might even be able to do this by yourself i challenge you in fact to pause the video what keep me in this frame right here that one and code this one up yourself and then hit play see if you got it right so here we are you've paused the video and uh you've coded it up and you're gonna see if you got this right now keep in mind there's multiple ways of doing getting to the same end result but here's how i'm going to code it up and let's see how close you were i'm going to say top 50 right it needs to be 100 but i need to calculate that with a pixel width so 100 from the right plus five pixels to account for that little arrow transform we're going to trans translate that on the y-axis and we're gonna go negative fifty percent let's check it out that's looking nice and now here we go we're just gonna simply say tooltip uh with the class of left and after we're gonna say top 50 left nope that's not right right 100 now we're gonna go border left color because we want the left arrow to appear and we're gonna say border right width zero so there's no conflict with the size there transform translate on the y-axis it's gonna be negative fifty percent save that boom i think we just nailed it so if that's what your code looks like or something like that good job you got the hang of it that's it for tool tips we got tool tip on the top right bottom and left purely css3 that's awesome it's really lightweight when you do that in css3 we did a couple new things we played around with the transform property which we learned a little bit about why you might want to do that particularly with animations a little challenge for you here if you want because right now these tooltips are just appearing on hover now we've played around with some animations thus far in this css3 in 30 days and we uh you should know or maybe you should be able to figure out how to when you hover make the tooltips fade in or maybe you know slide in slide down or slide over play around with it and see what you come up with i challenge you to make these tooltips a little bit more animated and keep in mind the transform and translate style that we learned about positioning and moving things using that where it incrementally moves into the position rather than uses a hard-coded position absolutely positioned property where it's only clunking over pixel by pixel keep that in mind but a simple challenge for you is to make these tooltips fade in on hover and play with it from there i hope you enjoyed today's lesson hope it gave you a few ideas for your own website's applications and all of that have a good day i'll see you tomorrow and day number 19. diese nueve adios [Music]