0:00:00
All right, what’s up everybody? Welcome back. We’re taking another look at a part of the automatic.css framework today, and that is tooltips. Now I’ve added tooltips to the automatic.css framework because it’s one of those things where very useful, very powerful, great for user experience, but they’re a pain in the ass to create for every single website. So I figured, you know, we’re building utility class framework. Why don’t we, you know, add as much utility as we possibly can to it. And since tooltips aren’t available to you in vanilla oxygen and a lot of you are having to add like a tooltips type plugin and then put short codes everywhere, none of that stuff is going to be your game plan or your go to any further with automatic.css adding tooltips and tooltips that you can customize the look and feel of and the behavior of instantly with other classes that are already baked into the automatic.css system. This is a game changer. So let’s go ahead and dive in.
0:01:03
We’ll take a look at how tooltips work. Whoa, hold on. I’ve got to get my screen fixed up here. Okay. Cool. So let’s add a section. All I’m going to do is add a card and we’re going to add some elements to the card and then we’re going to add tooltips to those elements. So bear with me and I’m using some of the other utility classes from the automatic.css framework. So let’s start with BG base ultra light as our background color for this section. We’re going to add a div and we’re going to pad this div with we’ll do large padding. How about that? So we’ll do some large padding. We’ll make the background white.
0:01:40
So BG white will round the corners. Let’s do rounded in and let’s throw a heading in there now. Let’s make that in H3. Let’s throw some text in there and let’s throw a text link in there and let’s also throw an icon in there. I think that’ll be good too. All right. So I’m going to put that icon up top for the icon. We’re going to choose a little info icon. So I’m going to click on that and we’ll make that like 30, 20. Let’s do 24 pixels on that. And then I want everything spaced out in that card. So I’m just going to do owl s. That’s going to space everything out nice and evenly. We’ll say this is an info card and then this is an info card.
0:02:25
It will have a tooltip inside the text as well as a tooltip on the icon and the text link. Okay. Now let’s fix this card with. So we’re going to go with M. That looks really good. I don’t like how that is. So this is an info. All right. This card will have a tooltip inside the text as well. Okay. I just didn’t want it to break one word to that last line. All right. Let’s see. Link goes here and then we’re going to put a tooltip on this link that tells the person where they’re going to go.
0:03:04
So you can see you get tooltip functionality and the link still works. We’re going to put a tooltip on this icon and we’re going to put a tooltip inside of this text here. And then I’m going to show you how we can manipulate the behavior and the look and feel of these tooltips rapidly. All right. So one more thing. I’m going to put a box shadow class onto that card and then I’m going to save. Okay. Let’s take a look on the front end at what we’ve got so far. So we’re looking fantastic. Let’s start with the icon. So I’m going to go to the icon. The way that you add a tooltip in Oxygen using the automatic CSS framework is very simple. You go to the advanced tab, you click on attributes and you add an attribute.
0:03:46
We’re going to make the attribute data tooltip. All right. And then in the value field, whatever you want that tooltip to say, that’s what you put in the value field. So this is an icon tooltip. Exclamation mark. All right. Now, I don’t have to do anything else. I don’t have to add a class to that thing. It just once the data attribute is attached to it, you’re going to have the tooltip functionality. And then I’ll show you the classes that we can use to manipulate the tooltip. But we’re just going to look at the default first. Okay. So the next thing I’m going to do is click on this link. All right.
0:04:20
This link is going to go to Google. So we’ll do that. Actually, you know what? Let’s go automatic CSS.com. Why don’t we just do that? Okay. So link goes to automatic CSS in a new window and same thing. I’m going to go to advanced attributes, add the attribute data tooltip. And then the value is going to be goes to automatic CSS.com. All right. And then last but not least, let’s grab that text. We’re going to add a span. So you just click the little span box up here. And it’s going to add a span. And I’m going to go to advanced attributes, add attribute data tooltip.
0:05:04
And this is a span tooltip. All right. So we are going to save and we’re going to go to the front end. And we’re going to look. I’ve just added three tooltips, no plugins, no short codes, no nonsense, just adding some data attributes. And let’s take a look at what we’ve got. So I hover over the icon. You can see that the hand changes or the cursor changes to the hand. And then we have our tooltip above with a cute little arrow there. And then we have the same thing happening over the link text. All right. So we’ve got three tooltips. Now what I want to say here is what’s cool, the style of that tooltip, the background color, the text color, whether the borders are rounded or not, whether it has a box shadow or not, all of that is globally controlled within automatic.css.
0:05:53
You have full control over how your tooltips look by default on the website. However, you can change from tooltip to tooltip. The styling of a tooltip. It is all within your control using other classes from the automatic.css system. So watch how easy this is. First of all, I want to take this span right here. Now there is a class of just tooltip. And anytime you’re using a tooltip on text, I recommend you use this tooltip class. Because what it’s going to do, we’ll go to tooltip and add it. It’s going to make it stand out and it’s going to make it stand out differently from how your normal links look. So that’s indicating to people that this is a tooltip. I could do the same thing here and put that there. All right. So now when I say and go to the front end, you can see it’s indicating to me that this is interactive.
0:06:50
So I’m more likely to interact with that thing. So that’s number one. Number two is we can change the direction of the tooltip. So where does the tooltip appear in relation to the element? So I’m going to click on the icon and I’m going to do tooltip double dash. And if I go to the right, it’s going to make that tooltip pop out to the right. This one I could do bottom, tooltip bottom. And then this one I could do tooltip left, maybe. Tooltip left. So now I’m going to save. I’m going to go back to the front end. I’m going to see that this one now flies out to the right. This one now flies out to the bottom. And this one now flies out to the left. So you have full control over the direction that that tooltip goes, which is very, very powerful because it depends on the design and where the tooltip is.
0:07:39
You kind of want to give that tooltip breathing room. And so you have full control over the position of that tooltip just by adding a directional class. What else can we do? Well, let’s say that we wanted these tooltips to be different background colors. So what’s very cool about this is I didn’t create a bunch of new classes for tooltips. I actually designed it so that the tooltips can link into the other class, the other parts of the framework for automatic.css. And it does this in a very, very intelligent way. All right. So I’m going to start with this text link here. And I want that background of the tooltip to be the primary color. All right. So the BG double dash primary. Now the BG double dash primary class sets a background color on an element.
0:08:28
But you notice that when I set this, why I hit enter in a second, it’s not going to put a background behind this link text. It doesn’t do anything. It’s smart enough to know, oh, I’m supposed to apply this to the actual tooltip part of this element. All right. I’m going to do that here as well. So we’re going to do BG. We already had it as base. Let’s do accent. We know what the accent color is. So we’ll do BG accent on that. And then let’s do BG white on this one. Boom. OK.
0:08:59
So let’s see what we’ve got. I’m going to go the front end. There’s one with primary. There’s one with accent. And there’s one with white. But we can’t really read it. All right. So we can fix that in just a second. All right. So now what I’m going to do is change the text color of these. So what I would like is for that text color to be the dark version of the primary color. So the primary colors that yellow, I want the text to be the dark version of that. And if you’ve watched the other tutorials, you know that automatic CSS automatically generates color shades for every single color you’re using. So that’s not going to be a problem.
0:09:33
I want the dark accent text. And I want black text here. All right. So let’s check this out. So I’m going to add text double dash. And this is going to be primary ultra dark. And then on this one, I’m going to do text double dash. This is going to be accent ultra dark. And on this one, we’re going to do text black. OK. I’m going to save if I can get my mouse to work up there. All right. I’m going to refresh. Again, it’s smart enough to not mess with that element. It only changes what is inside of the tool tip.
0:10:09
So you can see that has changed. That has changed. And that has changed. Now, this one is a problem because we can’t see the border. But if we put a box shadow on that tool tip, we would be able to see that tool tip really well. So what I’m going to do is I’m going to come back here. Again, on the icon, I’m going to do box shadow. And we’ll do S on that. Notice that the icon does not have a box shadow. Only the tool tip is going to have a box shadow. For this one, we’ll click box shadow double dash in. And for this one, we’ll do box shadow double dash L. So it’s hooking into regular box shadow classes from the automatic.css system.
0:10:50
And it is styling the actual tool tip. OK. Hopefully. There you go. So you can see the box shadow on that one. That one might need a bit bigger of a box shadow. You can see on this one, it has a little bit bigger box shadow. And then that one, it’s got the bigger box shadow. All right. So that’s all working well. What else can you do? What if we want to round the corners? What if we don’t want a square tool tip? All right.
0:11:13
So let’s go to here. And we’re going to put a rounded class on here. And we will do rounded M on this one. We’ll do rounded S on this one. And we will do rounded L on that one. All right. And we’ll hit save. And we’ll refresh. And now we have rounded tool tips, which is pretty cool. Or just look how fast we’re styling this stuff up. What if I needed a longer tool tip? And I want to be able to control the width of it. So we’re going to go down here. I’m going to go back to that attribute. And I can edit this tool tip text at any time.
0:11:53
So this goes to automatic.css.com. However, I’m going to, oops. Oh yeah. You can’t put a thing with it. Well, you can. It’s just going to escape it like that. However, I’m going to make this one longer. All right. Let’s just save and take a look at what that did. OK. Perfect. So what if I want that to only be two lines? I don’t want it to be three lines. I’m going to need that tool tip to be a little bit longer. In fact, I’m going to add a little bit more text, because that would still be an OK width.
0:12:23
We need this to have really long text to see how width works. OK. Save. So let’s just say you go crazy with your tool tip. OK. That’s kind of a lot. So maybe we want that to be a little bit longer. And maybe we want this to come out the bottom now. All right. So I’m going to take off the tool tip left class. And we’re going to go tool tip bottom. And then I’m just going to put a width class on here. And the width is going to be M. Let’s try. Safe.
0:12:54
OK. Notice nothing has changed with our link, how that looks. But now we have a much longer tool tip. It’s much wider now. And the text only spans two lines. So you have tremendous control. Now I know what some of you are asking. You’re like, all right, Kevin. But in my experience, tool tips when you get to mobile devices becomes a real problem. All right. Because especially when you’ve got stuff flying out to, remember when this was flying out to the left. But even you can see that, the width of that might be a problem on mobile.
0:13:28
So what I’m going to do is I’m going to shrink this down and show you, because we have automatic responsiveness. So everything automatically works. You can see that tool tip is now coming up. It’s fixed. It’s showing up at the bottom of the screen. And it’s not like flying off the edge of the person’s device. So we can make sure that these are always perfectly in where they’re supposed to be, perfectly visible. And on a device, and somebody is trying to access these tool tips, having it just pop up and overlay stuff at the bottom of the screen, I think it’s a really good way to handle what is very challenging part of tool tips.
0:14:08
It is well known that tool tips are difficult to handle on mobile devices. But I think this is a really kind of elegant solution for handling how that behaves on mobile. So this is an overview of the tool tips. Again, automatic.css, obviously, it’s in beta. We’re still refining and tweaking some things here and there. But I think this is a really, really cool, useful feature that has tremendous utility. I want to know what you think, though. Drop a comment below. If you love it, hit like, hit subscribe. Make sure you stay around for updates. There’s a lot more stuff coming on the automatic.css framework. And I can’t wait to hear what you guys think.
0:14:49
Thanks for a huge thumbs up this time.
