And instead of writing a bunch of custom, JavaScript are bringing in some complex library.

I'm gonna show you exactly how to build tool tips using Onley CSS.

Let's get started now.

Welcome back to Webb have simplified my name's Kyle, and my job is to simplify the Web for you so you can start building your dream project sooner.

So if that sounds interesting, make sure you subscribe to the channel for more videos, just like this one.

Now to get started, I have the working version of our product on the right.

And as you can see, we just have a profile picture.

And when we hover over that profile picture, we get a nice pop up describing that profile picture in more depth, and you can imagine this being used anywhere on your site.

It has nice in and out animations, which looks really good, and you can apply this literally, anywhere with just CSS now on the left side of the screen.

I have visual studio code open, and I have just a very basic amount of information done so it's open up what we have in life server, and you can see I have that cat image in a circle, and I just have really basic styles to make that circle image in the center of our screen.

This has nothing to do with the tool tips, so I've already written it out, and we have that single DIV, which contains that cat image.

And what we're going to do is add in all the CSS styles we need in order to make CSS only tool tips.

But before I get started, I want to mention that I have an entire CSS course that is launching the day this video comes out.

So if you're watching this, the course is live.

And for the very first week of that course being life, I'm giving everyone a huge discount.

So make sure if you're interested in learning more about CSS, you check out that course linked in the description within the first week of this video, coming out for a discount on the course.

Now back to this video if I go over to our style sheet and here's where we're gonna put all of the coat for CSS.

But before we do that, we need to work on actually figured out how we're going to get data from our HTML here into our CSS because normally you need javascript for that.

But something really nice is that we can actually use data attributes to pass data from our HTML to our CSS.

So if we create a date attributes, we're gonna call it, for example, data tool tip, and we're gonna put our tool tip in here, which is just gonna say thinking, cat.

So this is the description that will appear when we hover over our element.

And in order to access this tool tip inside of our CSS, all we need to do is select our element.

Which dark places doubt avatar.

And we need to select either a before or an after element.

And then inside of here, we can set the content equal to dysfunction a t t.

R.

And in here we passed any attribute we want in our case, our data tool tip attributes.

And now if we put that data tilted attributes in there and we save, you're gonna notice this text thinking cat shows up on our page because it's inside of this data attributes right here.

And we're accessing that in our CSS and setting that as the content of our avatar here, we could do the same thing with an after element if we want it.

Instead, you say we see we get the same exact output coming out over here.

So this is working exactly like we want it.

Where will the take html from here and pass it into our CSS.

And if we set this to be, for example, on hover only now we hover.

We get that text showing up.

So, as you can see, we already have the base of our tool tip done.

The next step is to actually style or tool tip and animate it in and out.

So to get started, the first thing I want to do is to build absolutely position this text around our image.

So we're gonna make our position relative on our avatar, which is just our circular image.

And then we can select our avatar after element as well as the before element socials.

Make sure we select both of these just like that.

And instead of here, we can set the position here to be absolute and we'll remove this content for now.

Let's just come in here and we're going to say that we want our top to be negative.

0.25 R E m.

And I want to just give this a little bit of a height, which is just gonna be 25 pixels and some with also going to be 25 pixels and we'll just put in here a background, which is gonna be black.

And then we'll just put in some place holder content for now.

And this is just so we can see our black box just like this.

And it's way of the top of our page because we have this top set to negative 0.25 r e m now, in order to get our element So it's positioned exactly where we want it to be.

Essentially, we want the bottom of our element to be 0.25 Ari in from the top and we want it to be dead center.

So to do that, we need to use the transformed property and in here we can use translate.

We're gonna do the ex direction first in order to translate in the extraction.

We just gonna put in here 50%.

But we want this to be negative 50%.

That'll move our container backwards by half of its own with.

And then if we set our left here to be 50% that's setting the left side of our container to the center.

And then we move our container backwards by half of its own with, So we should be dead centered.

And if we save, you can see we're now dead center in the image.

If I remove this translate, you can see the left side of our container is centered.

But by having that translate were able to center are actual image exactly like we want to hear with this Black Square.

Let's actually just bump this up to 50 pixels 5 50 pixels, so it's a little bit easier to see where we go now.

The next thing I want to do is our translate in the wide direction, and what we need to do here is just negative 100%.

We want essentially the bottom of our element to be where the top of our element is now.

If we save, you can see we've moved our element, its entire height upwards.

And now we're a 0.25 R e m From the very top of our image.

With this top of negative 0.25 we removed this and safe.

You can see our squares touching the top of our image.

We just want to offset it a little bit, which is going to give us a place to put our tool tip.

Now, the next thing I want to do is style, just our before portion of our avatar.

So we can say dot of attire before and inside of here.

I want to do a bunch of stuff.

So first I want to just move this square shape down into our before element that we only have a square far before element.

And also, I'll move our content down here.

But this content is gonna be our actual tool tive so we can say attributes of data tool tip just like that.

And as you can see our Texas poking out around the edge, if we change our color here to be white, you can see that text is showing up over the top, which is what we want now.

The next thing I want to do is instead of specifying a manual width and height, I want our text to determine our width and height.

But I want to give it a little bit of padding, which in our case will use 0.5 r e m.

And if I say if you can see we now have a black square which has some padding around our text, which looks really good.

But one other thing that I want to do is I want to change our with here to be Max content.

And essentially, what that's going to do is gonna make our rectangle as white as possible to try to fit as much text inside of it as we can.

But it'll never make it extra wide.

So if our tool tip, for example, was just cat, it's only gonna be as wide as our text.

But if we have longer text, it's gonna make it even whiter to fit that text and we put even more text.

It'll make it even whiter.

So let's go back to our normal just thinking cat text for now, go into our styles here and I want to change one thing which is when our text becomes really long.

I don't want it to go past the edges of our image.

So we're gonna set our with here to be 100% and this is going to be our maximum with so we can just say Max with 100%.

And now our text will never go beyond the edges of our image.

So when we had a lot of text, you can see it's just going to rap like this instead of spanning past our image, which I think it looks better next was changed his background.

Here.

We're gonna make this just a slightly different color will use 333 It's just a little bit more muted.

Kind of blends in with the background, which I really like, and we're also going around the corner is a little bit so I'll say border radius.

Just choose 3330.3 R E m.

As you can see, that gives us a nice, rounded look to the tulip, and I think it looks a little bit better.

Lastly, I just want to center this tool tip so we can say text a line center that way or text is nice and centered, which looks really good.

And now we could work on the actual hover animation so that when we hover over our element, we actually make the tool to pop up because right now it's always showing up.

So to do that, it's gonna be pretty simple, which want to select our avatar whenever we're hovering.

And we want to get that before element.

And all I want to do is change our transform to increase our scale.

So it's create a CSS variable, cold scale, and by default, we're gonna set our skill to zero, because when we're not hovering, we don't want this to scale.

But when we do, however, we want to change our scale toe one.

So essentially its scales all the way up to the full size and then inside of our transform what's just come in here and put a scale which is gonna be equal to that scale variable just like that.

And now if I save and hover, you can see our element pops up.

But right now it's not being animated, Soto animated.

We just need to set a transition.

We're gonna set a really quick 50 millisecond transition and we're gonna use the transformed property and now we hover.

You can see this element animates into place if I make this a little bit longer.

So it's easy to see.

You can see we have a nice hover animation where this is going to pop up, grow and then shrink when we uncover.

But you'll notice something interesting is this is actually growing from the center of the tool tip and we have her away.

You see that the vanishing point is in the dead center, and I want this to grow from the bottom of our image here upwards.

So in order to change that we can do is change our transform origin.

We want this to be in the bottom center.

And now if we save and hover, you can see our tool tip grows from the top of our image upwards instead of disappearing from the center, which I think looks a lot better when it comes to a tool tip.

Now, technically, that is a complete tool tip, but almost always you're gonna wanna have an arrow pointing at the thing that you're making a tool tip for.

So in order to do that, we're gonna take advantage of the other pseudo element, which is going to be our after element.

So we can say Avatar, we want to get the after Element and in here what is gonna set contact to an empty string.

And for now, I'm just going to give this a width of 10 pixels, a height of 10 pixels, and we're going to give it a background color of black and make sure that we actually change our scale on this by going appear insane dot Have attire.

Hopes hover after.

So that way it will scale up when we have her, you know, to speak at this nice black box showing up inside of our tool tip for now.

So now we can work on actually positioning this exactly where we want it and turning it into an aero formed shape.

And in order to make this into a narrow, we need to take advantage of borders.

And if you're not familiar with how to use borders to do this, I have a bog post I just released yesterday on how to make triangles in CSS.

I'll link down in the description, but essentially the gist of it is All you need to do is create an element which has a border.

This border is going to be whatever size you want your actual element to be.

Let's just say 10 pixels for now, we want to make it a solid border, and we're gonna tell all of the border colors to be transparent.

Then all we need to do is come down here and say that the border that we want to actually have be pointing in our direction, which in our case, is our border top.

That'll make an arrow pointing down.

We want to just change the color of this border to be, for example, black.

Now all that's left to do is remove our current with hype and background color.

And now, if we save and hover, you can see we have an arrow pointing downward, which is exactly what we want.

We just need to obviously position this arrow and change its color.

So in order to make sure we're using the same color between our different elements, let's create a new variable here called tool tip color.

We're gonna set that to that 333 variable color, and then we can use this tool tip color inside of here so we can say variable, which is tool tip color will do the same thing down here, which is a variable of tool tip color.

And now our color is matching for those two different elements, which is good.

But obviously the position of our arrow is incorrect.

So in order to position our aero where we want it to go first, let's take this border size here and turn this into a variable which would have called a row size that we can use it all over application.

We're gonna have our aero size, which is just going to be equal to 10 pixels just like that we saved.

We still have our aero showing up.

It's just covering that a inside of our cat, which is good.

And in order to get this where we want it, all we need to do is change our translate.

Why?

To essentially be a negative version of that.

So it's great yet again, another very both this one's gonna be called translate why.

And instead of defining a default value for translate, why we're just actually going to define here are variable, which in our case is going to be translate why and what is given a fallback value of zero.