AUTOMATIC.CSS Tooltips (The Easiest Custom Tooltips You've Ever Used)

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 tool tips 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 a 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 tool tips type plug-in and then put shortcodes everywhere none of that stuff is gonna be uh your 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 we'll take a look at how tool tips work whoa hold on i've got to get my 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 tool tips to those elements so bear with me and i'm using some of the other utility classes from the automatic.css framework so we're going to start with bg bass ultra light as our background color for this section we're gonna add a div and we're gonna pad this div with uh we'll do large padding how about that so we'll do some large padding we'll make the background white so bg white will round the corners let's do rounded m and let's throw a heading in there now uh let's make that an 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 gonna put that icon up top for the icon we're gonna choose a little info icon so i'm gonna 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 it will have a tool tip inside the text as well as a tool tip on the icon and the text link okay now let's fix this card width so we're gonna go with m that looks really good uh i don't like how that is so this is an info all right so this card this card will have a tooltip inside the text as well okay cool i just wanted to break one word to that last line all right uh let's see link goes here and then we're gonna put a tool tip on this link that tells the person where they're going to go so you can see you get tool tip 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 tool tips 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 what we've got so far so we're looking fantastic um let's start with the icon so i'm gonna go to the icon the way that you add a tool tip 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 we're going to make the attribute data tool tip all right and then in the value field whatever you want that tool tip 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 gonna have the tooltip functionality and then i'll show you the classes that we can use to manipulate the tool tip 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 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 tool tip 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 and 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 tool tip and this is a span tool tip all right so we're 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 shortcodes 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 change or the uh cursor changes to the hand and then we have our tool tip above with a cute little arrow there and then we have the same thing happening over the link text all right and then we have the same thing over this uh text all right so we've got three tool tips now what i want to say here is what's cool the style of that tool tip 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 you have full control over how your tooltips look by default on the website however you can change from tool tip to tool tip 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 a class of just tool tip and anytime you're using a tool tip on text i recommend you use this tool tip class because what what it's going to do we'll go tool tip and add it it's going to make it look 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 tool tip i can do the same thing here and put that there alright so now when i save and go to the front end you can see it's indicating to me that this is interactive 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 tool tip double dash and if i go to the right it's going to make that tool tip pop out to the right this one i could do bottom tool tip bottom and then this one i could do tool tip left maybe tool tip left so now i'm gonna save i'm gonna go back to the front end i'm gonna 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 tool tip goes which is very very powerful because it depends on you know the design and where the tool tip is you kind of want to give that tool tip 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 tool tips to be different background colors so what's very cool about this is i didn't create a bunch of new classes for tool tips i actually designed it so that the tool tips can link into the other class the other parts of the the framework for automatic.css and it's 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 i'm going to do bg double dash primary now the bg double dash primary class sets a background color on an element but you notice that when i set this when 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 tool tip part of this element all right i'm gonna do that here as well so we're gonna do bg um we already had it as base let's do accent i don't even know what the accent color is uh so we'll do bg accent on that and then let's do bg white on this one boom okay so let's see what we've got i'm gonna go to the front end there's one with primary there's one with accent and oh there's one with white but we can't really read it alright 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 color is 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 i want the dark accent text and i want black text here alright 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 uh black okay 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 tooltip 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 m 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 and it is styling the uh actual tooltip okay 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 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 right and we're like just look at how fast we're styling this stuff up what if i needed a longer tool tip right 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 tooltip text at any time so this goes to automatic.css.com however i'm going to whoops 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 okay perfect so what if i want that to only be two lines right i don't want to be three lines i'm gonna need that tool tip to be a little bit longer in fact i'm gonna add a little bit more text just because that would still be an okay width um we need this to have really long text to see how width works okay save so let's just say you go crazy with your tool tip okay that's 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 clasp 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 save okay notice nothing has changed with our link you know how that looks but now we have a much longer tooltip right 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 so what i'm going to do is i'm going to shrink this down and show you because we have automatic responsiveness right so everything automatically works you can see the tooltip 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 um so we that we can make sure that these are always perfectly you know in uh where they're supposed to be perfectly visible and on on a device you know and somebody's trying to access these tool tips having it just pop up and overlay stuff at the bottom of the screen i think is a really good way to handle what what is very challenging part of tool tips right it is you know 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 uh automatic.css obviously it's in beta we're still refining and tweaking some things here and there but i think you know this is a really really cool useful feature that has tremendous utility i want to know what you think though uh drop a comment below if you love it hit like hit subscribe make sure you stay uh you know 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 peace

Channel: Digital Ambition

Views: 2,183

Keywords:

Id: 0rIfVz_zy2U

Length: 14min 51sec (891 seconds)

Published: Sun Sep 26 2021