Up next in 10
How To Make Tooltips With Only CSS
4K views
Feb 7, 2024
"How To Make Tooltips With Only CSS" is an instructional video demonstrating how to create tooltips for websites or applications using only CSS (Cascading Style Sheets). The tutorial guides viewers through the process of designing and implementing tooltips that appear when hovering over specific elements. Through clear demonstrations and explanations, viewers learn how to use CSS techniques such as pseudo-elements, transitions, and positioning to achieve the desired tooltip effect. By following along with the tutorial, viewers can create stylish and functional tooltips without the need for JavaScript, enhancing the user experience on their web projects. Whether you're a beginner or an experienced developer, this video offers valuable insights into creating tooltips using CSS, providing an elegant solution for displaying additional information or context to users.
View Video Transcript
0:00
If you're building a site, then soon enough you're going to need to add in tooltips
0:04
And instead of writing a bunch of custom JavaScript or bringing in some complex library
0:09
I'm going to show you exactly how to build tooltips using only CSS. Let's get started now
0:18
Welcome back to WebDev Simplified. My name's Kyle, and my job is to simplify the web for you
0:24
so you can start building your dream project sooner. So if that sounds interesting
0:28
make sure you subscribe to the channel for more videos just like this one. Now to get started
0:33
I have the working version of our product on the right. And as you can see, we just have a profile
0:38
picture. And when we hover over that profile picture, we get a nice pop up describing that
0:42
profile picture in more depth. And you can imagine this being used anywhere on your site
0:47
It has nice in and out animations, which looks really good. And you can apply this literally
0:52
anywhere with just CSS. Now on the left side of the screen, I have Visual Studio Code open
0:57
and I have just a very basic amount of information done. So let's open up what we have in live server
1:03
And you can see I have that cat image in a circle. And I just have really basic styles to make that
1:08
circle image in the center of our screen. This has nothing to do with the tooltips
1:12
so I've already written it out. And we have that single div, which contains that cat image
1:17
And what we're going to do is add in all the CSS styles we need in order to make CSS only tooltips
1:23
But before I get started, I want to mention that I have an entire CSS course that is launching the
1:28
day this video comes out. So if you're watching this, the course is live. And for the very first
1:33
week of that course being live, I'm giving everyone a huge discount. So make sure if you're interested
1:38
in learning more about CSS, you check out that course linked in the description within the first
1:43
week of this video coming out for a discount on the course. Now back to this video. If I go over
1:48
to our style sheet, in here is where we're going to put all of the code for our CSS. But before we
1:54
do that, we need to work on actually figuring out how we're going to get data from our HTML here
1:59
into our CSS, because normally you need JavaScript for that. But something really nice is that we can
2:05
actually use data attributes to pass data from our HTML to our CSS. So if we create a data attribute
2:12
we're going to call it for example, data tooltip. And we're going to put our tooltip in here
2:16
which is just going to say thinking cat. So this is the description that will appear when we hover
2:21
over our element. And in order to access this tooltip inside of our CSS, all we need to do
2:27
is select our element, which dark places dot avatar. And we need to select either a before
2:34
or an after element. And then inside of here, we can set the content equal to this function
2:39
ATTR. And in here, we pass any attribute we want, in our case, our data tooltip attribute
2:46
And now if we put that data tooltip attribute in there, and we save, you're going to notice this
2:50
text thinking cat shows up on our page, because it's inside of this data attribute right here
2:56
And we're accessing that in our CSS and setting that as the content of our avatar here, we can do
3:01
the same thing with an after element if we want it instead, you say we see we get the same exact
3:06
output coming out over here. So this is working exactly like we want it, we're able to take HTML
3:11
from here and pass it into our CSS. And if we set this to be for example, on hover only
3:18
now we hover, we get that text showing up. So as you can see, we already have the base of our
3:22
tooltip done. The next step is to actually style our tooltip and animate it in and out. So to get
3:28
started, the first thing I want to do is to be able to absolutely position this text around our
3:32
image. So we're going to make our position relative on our avatar, which is just our circular image
3:38
And then we can select our avatar after element, as well as the before element. So let's just make
3:44
sure we select both of these, just like that. And inside of here, we can set the position here to be
3:50
absolute. And we'll remove this content for now, let's just come in here. And we're going to say
3:54
that we want our top to be negative point two, five, REM. And I want to just give this a little
4:00
bit of a height, which is just going to be 25 pixels, and some width, also going to be 25 pixels
4:07
And we'll just put in here a background, which is going to be black. And then we'll just put in some
4:11
placeholder content for now. And this is just so we can see our black box just like this. And it's
4:16
way at the top of our page, because we have this top set to negative point two, five, REM. Now in
4:21
order to get our element, so it's positioned exactly where we want it to be, we essentially
4:25
want the bottom of our element to be point two, five, REM from the top, and we want it to be dead
4:30
center. So to do that, we need to use the transform property. And in here, we can use translate
4:36
we're going to do the x direction first. And in order to translate in the x direction, we're just
4:40
going to put in here 50%. But we want this to be negative 50%. That'll move our container backwards
4:46
by half of its own width. And then if we set our left here to be 50%, that's setting the left side
4:52
of our container to the center. And then we move our container backwards by half of its own width
4:57
So we should be dead centered. And if we save, you can see we are now dead center in the image
5:02
If I remove this translate, you can see the left side of our container is centered. But by having
5:07
that translate, we're able to center our actual image exactly like we want to hear with this black
5:11
square. Let's actually just bump this up to 50 pixels by 50 pixels. So it's a little bit easier
5:16
to see. There we go. Now the next thing I want to do is our translate in the y direction. And
5:22
what we need to do here is just negative 100%. We want essentially the bottom of our element to be
5:28
where the top of our element is. And now if we save, you can see we've moved our element its
5:32
entire height upwards. And now we are 0.25 REM from the very top of our image with this top of
5:38
negative 0.25. If we remove this and save, you can see our square is touching the top of our image
5:43
We just want to offset it a little bit, which is going to give us a place to put our tool tip. Now
5:48
the next thing I want to do is style just our before portion of our avatar. So we can say dot
5:52
avatar before. And inside of here, I want to do a bunch of stuff. So first, I want to just move this
5:59
square shape down into our before element. That way we only have a square for our before element
6:04
And also I'll move our content down here. But this content is going to be our actual tool tip
6:09
So we can say attribute of data tool tip, just like that. And as you can see, our text is poking
6:16
out around the edge. If we change our color here to be white, you can see that text is showing up
6:21
over the top, which is what we want. Now the next thing I want to do is instead of specifying a
6:25
manual width and height, I want our text to determine our width and height. But I want to
6:29
give it a little bit of padding, which in our case, we'll use 0.5 REM. And if I save, you can
6:35
see we now have a black square, which has some padding around our text, which looks really good
6:40
But one other thing that I want to do is I want to change our width here to be max content. And
6:45
essentially what that's going to do is it's going to make our rectangle as wide as possible to try
6:49
to fit as much text inside of it as we can, but it will never make it extra wide. So if our tool
6:54
tip, for example, was just cat, it's only going to be as wide as our text. But if we have longer text
7:00
it's going to make it even wider to fit that text. And if we put even more text, it'll make it even
7:05
wider. So let's go back to our normal just thinking cat text for now, go into our styles here. And I
7:11
want to change one thing, which is when our text becomes really long, I don't want it to go past
7:15
the edges of our image. So we're going to set our width here to be 100%. And this is going to be our
7:22
maximum width. So we can just say max width 100%. And now our text will never go beyond the edges
7:28
of our image. So when we had a lot of text, you can see it's just going to wrap like this, instead
7:32
of spanning past our image, which I think looks better. Next, let's change this background here
7:37
we're going to make this just a slightly different color, we'll use 333. It's just a little bit more
7:42
muted kind of blends in with the background, which I really like. And we're also going to round the
7:46
corners a little bit. So I'll say border radius, just use point three, REM. And as you can see
7:52
that gives us a nice rounded look to the tooltip. And I think it looks a little bit better. Lastly
7:56
I just want to center this tooltip. So we can say text align center, that way our text is nice and
8:02
centered, which looks really good. And now we can work on the actual hover animation so that when
8:06
we hover over our element, we actually make the tooltip pop up, because right now it's always
8:11
showing up. So to do that, it's going to be pretty simple, we just want to select our avatar
8:16
whenever we're hovering, and we want to get that before element. And all I want to do is change our
8:21
transform to increase our scale. So let's create a CSS variable called scale. And by default
8:28
we're going to set our scale to zero, because when we're not hovering, we don't want this to scale
8:32
But when we do hover, we want to change our scale to one. So essentially, it scales all the way up
8:37
to the full size. And then inside of our transform, let's just come in here and put a scale, which is
8:43
going to be equal to that scale variable, just like that. And now if I save and hover, you can
8:48
see our element pops up. But right now it's not being animated. So to animate it, we just need
8:54
to set a transition, we're going to set a really quick 50 millisecond transition. And we're going
8:59
to use the transform property. And now when we hover, you can see this element animates into
9:05
place. If I make this a little bit longer, so it's easier to see, you can see we have a nice
9:09
hover animation where this is going to pop up, grow and then shrink when we unhover. But you'll
9:13
notice something interesting is this is actually growing from the center of the tooltip. When we
9:17
hover away, you see that the vanishing point is in the dead center. And I want this to grow from
9:22
the bottom of our image here upwards. So in order to change that, what we can do is change our
9:27
transform origin. And we want this to be in the bottom center. And now if we save and hover, you
9:33
can see our tooltip grows from the top of our image upwards, instead of disappearing from the
9:38
center, which I think looks a lot better when it comes to a tooltip. Now technically, that is a
9:43
complete tooltip. But almost always, you're going to want to have an arrow pointing at the thing
9:47
that you're making a tooltip for. So in order to do that, we're going to take advantage of the other
9:52
pseudo element, which is going to be our after element. So we can say avatar, we want to get the
9:58
after element. And in here, we're just going to set contact to an empty string. And for now, I'm
10:03
just going to give this a width of 10 pixels, a height of 10 pixels. And we're going to give it a
10:10
background color of black and make sure that we actually change our scale on this by going up here
10:17
and saying dot avatar. Whoops, hover after. So that way it will scale up when we hover, you'll
10:27
notice we get this nice black box showing up inside of our tooltip for now. So now we can work
10:32
on actually positioning this exactly where we want it and turning it into an arrow formed shape
10:37
And in order to make this into an arrow, we need to take advantage of borders. And if you're not
10:41
familiar with how to use borders to do this, I have a blog post I just released yesterday on how to
10:46
make triangles in CSS, I'll link down in the description. But essentially, the gist of it is
10:51
all you need to do is create an element which has a border. This border is going to be whatever size
10:57
you want your actual element to be, let's just say 10 pixels for now, we want to make it a solid border
11:03
And we're going to tell all of the border colors to be transparent, then all we need to do is come
11:08
down here and say that the border that we want to actually have be pointing in our direction
11:12
which in our case is our border top, that'll make an arrow pointing down, we want to just change the
11:17
color of this border to be, for example, black. Now all that's left to do is remove our current width
11:23
height, and background color. And now if we save and hover, you can see we have an arrow pointing
11:27
downward, which is exactly what we want. We just need to obviously position this arrow and change
11:33
its color. So in order to make sure we're using the same color between our different elements
11:37
let's create a new variable here called tooltip color, and we're just going to set that to that
11:44
333 variable color. And then we can use this tooltip color inside of here, so we can say
11:50
variable which is tooltip color, we'll do the same thing down here, which is a variable of tooltip
11:56
color. And now our color is matching for those two different elements, which is good, but obviously
12:01
the position of our arrow is incorrect. So in order to position our arrow where we want it to go
12:06
first let's take this border size here and turn this into a variable, which we're going to call
12:11
arrow size, that way we can use it all over our application. And we're going to have our arrow
12:17
size, which is just going to be equal to 10 pixels, just like that. If we save, we still have our arrow
12:23
showing up, it's just covering that A inside of our cat, which is good. And in order to get this
12:27
where we want it, all we need to do is change our translate y to essentially be a negative version
12:32
of that. So let's create yet again, another variable, this one's going to be called translate
12:37
y. And instead of defining a default value for translate y, we're just actually going to define
12:42
here our variable, which in our case is going to be translate y. And we'll just give it a fallback
12:49
value of zero. So if we don't define this custom variable, it's not actually going to move anything
12:54
So we save, you can see now our elements are not being moved because we have no translate y
12:59
So inside of our before element, which is our main tooltip, let's set that translate y. And we want
13:05
our translate y here to be negative 100%. That's what we had before. But we also want this so that
13:11
our arrow is also going to be taken into account. So in order to translate our arrow position as
13:16
well, we need to do a calculation where we have negative 100%. And we also need to subtract our
13:22
arrow size. So we'll get that variable for our arrow size as well. Now if I save and hover
13:29
you can see we have a gap plus room for arrow underneath of our tooltip. So now instead of our
13:34
arrow, we can specify our translate in the y direction. And this translate is simply just
13:41
going to be a negative version of our arrow size. So we can just do a calculation of negative one
13:46
times our arrow size. This is just essentially going to be reverse direction of our arrow. And
13:52
if we hover, you now see that our arrow is in the correct position. And our tooltip is in the
13:56
correct position. But when they animate, you notice that our tooltip is not animating from
14:01
the correct position, the arrow is not you can see they disconnect, we essentially want our
14:05
arrow to disappear at the top portion of it, that way it will disappear into the tooltip
14:10
So in order to do that, it's pretty simple. We just need this transform origin property. Again
14:15
we want this to be the top center. Now when we hover, you can see that our arrow and our
14:20
tooltip are actually staying stuck together, which is exactly what we want. And the really great
14:25
thing about how we set this up is we could easily change our tooltip color. For example, we could
14:29
make this let's say green. And now when we save, we now have a green tooltip. Or we could change
14:34
our arrow size to be even larger at 20 pixels. And now our spacing is correct. And we just have
14:40
a larger arrow. Everything is responsive based on these variables. So it's very easy to customize
14:45
this tooltip. And that's all it takes to create the CSS only tooltip. If you enjoyed this video
14:51
make sure to check out my full CSS course, where I covered this as well as many, many other topics
14:57
I'll have that link down in the description. And also subscribe to the channel for more
15:00
videos just like this one. Thank you very much for watching and have a good day