Welcome back to see us as three in 30 days.

Today is day 18 and we're gonna be coding up some CSS three tool tips.

Let me show you what that looks like.

Right here in the browser.

We have the final result down here, and the tool tip is essentially a little element that just appears in some position around the element toe let you know a little bit more information.

The purpose of a tool tip 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 may be the tool tip lets them know what it stands for.

Or maybe there is an element called 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 tool tip, but the purpose of this lesson is not necessarily to show you the y of the tool tip.

Rather the how to make a tool tip.

So let's jump in and start making tool tips.

So in this final results, I'm just gonna show you what we're gonna make.

We got this top tool tip this right tool tip, bottom tool tip and left tool tip.

All we're gonna do is we're gonna code out these thes little elements.

It's just something to hover over, and then we're gonna make a global tool tip 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.

Ah, lot of the Times tool tips are made using JavaScript.

Urge a query, but in this case, just CSS three.

Because that's how we roll in CSS three and 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 Nazi SS is always there for your reference as you go along.

If you mess something up or if you confused about something that should help you out.

Otherwise, let's get started here in the index.

I'm gonna show you what the mark up looks like because it is a little bit important because we're gonna be styling it.

So in the sandbox here we have just some dibs on the div.

They all have the class of tool tip and then the position of where it will be.

So the class 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 tool tip on top, right, and so on and so forth.

And that is really it.

For the markup in the sandbox, we're gonna get started.

And we're gonna style our tool tip element itself so that 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 gonna be positioning that tool tip itself.

So right now we're positioning the parent element that we call tool tip, but it has to have a position of relative or absolute, whichever one you choose in this case, we're gonna use relative so it doesn't move around in weird places.

And that's simply so that when we position the tool tip itself using the before and after virtual elements, we need to have it stay contained within its parent.

So position relativism.

Very important in this case.

Height 60 pixels.

Again, this is just the target we're gonna hover over.

I'm just jamming here.

250 pixels background.

We're gonna use the pink color that branded pink.

That's f 2395 A.

Whatever color you want really?

Doesn't matter.

This isn't functionality.

This is just some.

This is just vanity styles.

Here, text aligns center.

We're gonna line height the text in the center of it to 60 pixels, which is gonna be the same as the height.

So it's vertically aligned as well.

A center line because of text line, center font size, something large and readable.

Aging 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 the little little little sandbox here, and let's get coating up the tool tip itself.

So we're going to just say tool tip, But we're gonna actually select the before pseudo elements.

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 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 gonna 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 absolutes gonna give us more flexibility that index to just a little bit above the default, which to 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, with 200 pixels padding 10 pixels.

So something nice and simple font size.

I'm gonna go 0.8.

That's 80% of the parent elements font size, which is 18 pixels.

So 80% of the 80% of that, whatever whatever that number is.

Line height 1.4 em.

Let's try that.

And border radius, we're going to say five pixels, slightly rounded background color.

We're gonna go with an RGB a something that you could see through simply a 000 and 0.8.

So it's black, but 80% Alfa Channel.

So little bit transparent color white.

That's the text.

The content.

This is cool content used with the before and after Sudan elements to generate content specific text within an element.

So we've been using this a lot in this way, but they're actually gonna This means you can actually put text within the element.

We just putting an empty string because it allows that after element to appear.

So we still need to have content within the pseudo element.

But we're actually gonna have a display riel content this time, not just an empty string.

So we're just gonna do something fun here.

So instead of an empty string rocks, you're gonna use attributes value.

This says attributes 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 attributes within the HTML.

So we want to grab the title.

That title we specifically put in the HTML will say Tool tip on the right told upon 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, were announced selectable tip after pseudo element.

And now, before we get move forward, let's actually just see if this did anything.

So I'm gonna move over to the browser and it doesn't do anything because we haven't done any styles upon hover.

So we're gonna 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.

Ah, the Toyota element.

When we hover over the tool tip element, do something with the before pseudo element.

So it's a kind of an interesting little selector, So display in line block.

Watch this.

Say 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 browsers need of functionality.

It shows, uh, the title just for accessibility.

But we will 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 styling.

Here's the problem.

Maybe you notice this and you were just shaking your head wondering when I was gonna catch it.

I styled tool tip after Suitor Element.

I meant to style these tool tip before pseudo element.

And then down here, I said on, however, show that before element, which we haven't done anything with.

So let's change that to before and top.

We're going to take that out because I'm actually gonna use that.

Save that and then on hover, that should work.

Let's see what happens here.

There it iss Okay, so the tool tip 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 has a little arrow.

So I'm gonna create that little arrow with, ah, the after pseudo element, which I was accidentally styling this whole time.

So that's gonna be like this position, Absolute Zet Index, We're gonna say one, it's gonna be above the parent, but behind the the little tool tip itself And then I'm gonna say display none again.

By default, we don't associate with zero height zero, and this is because we're gonna make it.

We're gonna make a triangle out of a border like we did with Pac Man just recently here.

So we're gonna say border five pixels.

Solid, transparent.

So we don't see any of the border, and then a little bit later here, I'm gonna create and display one side of it.

So let's just leave it at that and they're gonna say, content, empty string.

So that will create an element that we still won't see.

And we're gonna do something within a SEC.

So let's position that.

Let's, um, let's say article bottom zero No, 100%.

So the very bottom of the element left 50% border top color.

Let's do the same color as the tool.

Tip 0000 point.

Foz your 0.0.8 rgb a.

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 hovers.

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 staff 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 Sape shape and size, but it's in the wrong spot, so we need to move that in the right spot.

So what do we gotta 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 needs 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 gonna do is we're going to position it now and we're gonna say bottom.

Um, now, if I just said bottom 100% what's gonna happen, it's gonna move it up.

But I want to add another five pixels to that.

So because the the the heart, the size of that era was five pixels because we said in our border five pixels.

So we want it to be 100% from the bottom, but then another five 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 tilted 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 pixel value is through the couch CSS function.

So check this out.

Let's go back to our CSS.

I'm gonna wrap this in the Cal HQ function like this, but I'm gonna say, plus five pixels that allows us to combine different values.

Different measurements.

Now, watch this.

100% plus five pixels.

That's amazing.

How cool is that?

So now we need to fix that, Uh, needs to move it over.

So let me let me do another thing here.

We're going to Ah, we gotta move it left.

Let's say left.

50%.

Save that.

See what happens.

Okay, so now we're 50% over Now.

We're starting to look good.