Name: CSSだけでツールチップを作成する方法 (How To Make Tooltips With Only CSS)
Uploaded: 2021-01-14T10:38:27.000Z
Duration: 15 min 5 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

to 不定詞

If you're building a site than soon enough, you're gonna need to add in tool tips.

動名詞

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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