Pure CSS3 Animated Tooltips
I know I know, old dog can’t learn new tricks. You all have seen that CSS3 can do amazing inline tooltips, so what makes my bone any different from anyone else’s. My bone is white and chewed on just like everyone’s but it has one amazing thing that I couldn’t find anywhere else. Every where I looked for Animated CSS3 Tooltips, they all only worked for block level elements, so I couldn’t have and tooltips in the middle of my sentence? Well to me that just sounds like a terrible draw back, I want to be able to put a slick and stylish tooltip where I want it, not in some list or at the end of a paragraph, I want to have it right in the middle of a sentence with no problem. Do I sound like all bark but no bite…
Whats The Purpose of this Project
Well other then it sounded like fun to do, it was really because like any other dog out there, I like to chase my tail around and around and around until I finally catch it. So even though, others have there own tutorials on how to catch their tails, this is mine on how to catch mine. I’ve tried to make it as different as possible from all of the ones I have seen, but really there are only a few ways to catch ones tail. So lets take a run out side and see what fun things we can rip apart in this tutorial.
Well Like Any Dog with a Toy… Let’s Rip This apart!
Alright as always, I like to start with the CSS because its usually the most confusing sound we have to hear. So know that I have my shiny new bone nice and buried lets dig it up and show you how its done. So I am going to start off with the simple part, which is the arrow at the bottom of the tooltip. I have looked alot of ways people of accomplished this task and they are mostly the same. So its probably the easiest part to look at.
.tooltip:before, .tooltip:after {
content:'';
position:absolute;
bottom:-13px;
left:50%;
margin-left:-9px;
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid rgba(0,0,0,0.1);
}
.tooltip:after{
bottom:-12px;
margin-left:-10px;
border-top:10px solid rgba(34,34,34,0.9);
}
There may be better ways to do this arrow, but this is what I figured out to do. Lets put down our bones and explain how this works. But I am assuming you have planned long enough with CSS that you understand most of whats in there. So Ill just go over the border section and how it makes the arrow. Alright, so you may be looking and wondering why I am setting the border to transparent, or etc. Well The best way to show how something works is to actually show how it works. So I here is what the arrow looked like before I made it transparent.
.tooltip:before, .tooltip:after {
border-left:10px solid RED;
border-right:10px solid RED;
border-top:10px solid BLACK;
}
Alright, To change the color of this arrow, you going to want to change the one in the .tooltip:after section, since its the one that controls, the color, best to have it match the border color you give the tooltip described in the next section.
No More Begging for Scrapes, Time for the Main Dish
Alright, so we just when though, the arrow, but what your really curious in is, What is the CSS for the actual tooltip, well lets get our noses out of the dog dish and steal the turkey from the table!
.tooltip {
display:block;
position:absolute;
width:150px;
padding:5px 15px;
left:50%;
bottom:25px;
margin-left:-95px;
/* Tooltip Style */
color:#fff;
border:2px solid rgba(34,34,34,0.9);
background:rgba(51,51,51,0.9);
text-align:center;
border-radius:3px;
/* Tooltip Style */
opacity:0;
box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-0-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0);
/* reset tooltip, to not use container styling */
font-size:14px;
font-weight:normal;
font-style:normal;
}
To some this may look like alot of CSS for one single element, but trying to cover every browser can be kinda touch. It like chewing though a leather shoe, you can do, but not in a single bite. So now that I gave you the shoe time to break it apart stitch by stitch.
Well lets start with the with what the shoe is made out of. (For those not quite following though with my dog humor, I mean the shape and layout of the tooltip itself.)
display:block; /* Setting the tooltip as a block level element, to containt any element it wants to */ position:absolute; /* Positioning the tooltip so it knws where to be */ width:150px; /* This is how wide you want your tooltip */ padding:5px 15px; /* This is to space the tooltip borders away from the content within. Visually Appealing */ left:50%; /* Centers the tooltip above the element its for */ margin-left:-95px; /* Centers the tooltip above the element its for */ bottom:25px; /* Positions the tooltip above the element (Yes its supposed to be "bottom" and not "top")*/
Alright so now we know that the tooltip is supposed to be a block level element, its centered and that is 25px from the bottom of the container element
Lets figure out what our show looks like, What colors and designs it has.
color:#fff; /* Color of the text within the tooltip */
border:2px solid rgba(34,34,34,0.9); /* The color of the border of the tooltop, should be the same as the one in ".tooltip:after" */
background:rgba(51,51,51,0.9); /* Background color, I chose to go with a dark gray/almost black, I used rgba, so that the background of the tooltip would be slightly see though*/
text-align:center; /* Center aligns the text, looks best in my opinion. */
border-radius:3px; /* Border radius, simply how rounded do you want your border to look */
Keep in mind, these settings are all optional, they are completely up to you to chose. They are all rather basic CSS as well.
Now for the fun part… Animating and controlling the tooltip
opacity:0; /* Ensure that the tooltip is hidden until hovered over */
box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3); /* Give the tooltip a black shadow that is barely able to be seen. */
/* This is the transition part of the CSS, it is what controls the tooltip to animate in on hover and then back out when you leave the element */
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-0-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
/* This is so the element can be inline with the rest of the content and flow nicely it also makes the tooltip look like its growing and shrinking. */
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0);
Now, the scale transform is required, This is because without it, you could over in a area around the tooltip and it would make the tooltip look really buggy. It was the best solution to get in animated tooltip.
and lastly the last section of the tooltip. Now since you have to put this tooltip within a element like “<i>” the font within it would become italic, and we really dont want that to happen, so I simply added some font reseting to the tooltip class.
font-size:14px; /* Should be the font-size of your document, or any size you want the tooltip font to be */ font-weight:normal; /* Makes sure that if you put it within a bold tag or header tag, its not bolded */ font-style:normal; /* Makes sure the font isn't italic */
That was like a two hour run in the park, time to catch our breath
We are nearing the end of the css for the tooltip, just a few more little tricks w have to learn though. One is what elements do we want our tags to work on and if more then one maybe we should create a class. Well thats what I did, I made it work natively on all links with a span tooltip within the link and then created a new class so I can assign it to any element I want to. Here is the class I created (Comments included, its nice and short)
.tooltip-container {
position:relative; /* Forces tooltip to be relative to the element, not the page */
cursor:help; /* Makes you cursor have the help symbol */
}
Sooo Close I can smell Christmas Dinner being cooked!
Alright, so far we have created the tooltip, the arrow for the tooltip, the class so we know what elements have a tooltip, but we are still missing one last thing. How does the tooltip know when to display and make itself visible. Alright, since this is another simple section, its been pre-commented.
.tooltip-container:hover .tooltip, a:hover .tooltip {
/* Makes the Tooltip slightly transparent, Lets the barely see though it */
opacity:0.9;
/* Changes the scale from 0 to 1 - This is what animtes our tooltip! */
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
}
Alright so now we have everything layed out in CSS. Lets look at in one big section all at once now.
.tooltip-container {
position:relative; /* Forces tooltip to be relative to the element, not the page */
cursor:help; /* Makes you cursor have the help symbol */
}
.tooltip {
display:block;
position:absolute;
width:150px;
padding:5px 15px;
left:50%;
bottom:25px;
margin-left:-95px;
/* Tooltip Style */
color:#fff;
border:2px solid rgba(34,34,34,0.9);
background:rgba(51,51,51,0.9);
text-align:center;
border-radius:3px;
/* Tooltip Style */
opacity:0;
box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-0-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0);
/* reset tooltip, to not use container styling */
font-size:14px;
font-weight:normal;
font-style:normal;
}
.tooltip:before, .tooltip:after{
content:'';
position:absolute;
bottom:-13px;
left:50%;
margin-left:-9px;
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid rgba(0,0,0,0.1);
}
.tooltip:after{
bottom:-12px;
margin-left:-10px;
border-top:10px solid rgba(34,34,34,0.9);
}
.tooltip-container:hover .tooltip, a:hover .tooltip {
/* Makes the Tooltip slightly transparent, Lets the barely see though it */
opacity:0.9;
/* Changes the scale from 0 to 1 - This is what animtes our tooltip! */
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
}
Thats right, as long as you have been running along side me chasing the same bone, this is all of the CSS that you have dug up! Now lets look at the HTML part.
Well that is one car we chased down the road, time to catch a cat next! (Lets look at the HTML mark up)
Well we have prepared our tooltips to work one of two ways, any any element with the class “tooltip-container” or on any element with a link that has the “tooltip” class on an element within it. So I am going to show you the mark for both of them. First lets look at the link one, because it does not require us to give the “link”
Dream-world.us - RobertStop by for amazing tutorials. I'll even take request!
When someone comes to your site they would see…
but as they hover over the link they would see…
Now lets look at an example of a tooltip using just the class on any old element, I chose to use the italic indicator, to get it some separation from the rest of the page.
hover over meAll Bite, No Bark
When the user comes to your site they would see…
but apon following its commands and hovering over it, they would be greeted with another message!
What if I want different kinds of bones?
Well that just as easy to accomplish, we just have to create a few more classes like so.
.tooltip-style1 {
color:#000;
border:2px solid #fff;
background:rgba(246,246,246,0.9);
font-style:italic;
}
.tooltip-style1:after{
border-top:10px solid #fff;
}
Now just modify the HTML mockup to look like the following.
What kinda dog are you?One thats not a kat!
Its just like any other tooltip you would create, but you have to add you new class right next to the class “tooltip”!
Now I know this was a lengthy tutorial, but all dogs like a long walk not a short one. As always, if you visit the demo, you can download the it and look at the source for yourself.
Are you trying to create something amazing, but can’t figure out how it was done? Searched the web, maybe you found something similar but don’t understand it? Couldn’t find it on the web at all? If you need any help, or simply want a tutorial on how to do something. Shoot me an email at rem.mcintosh@gmail.com and Ill see if its possible, if so, I’ll write up a tutorial on here for you!
Hope this has helped someone.
Incoming search terms:
css3 tooltip, tooltip css3,
Robert McIntosh
I am highly skilled in HTML/HTML5, CSS/CSS3, JavaScript, and PHP. This knownledge of both Client and Server side scripting language allows me to create stunning designs that come with a CMS(Content Management System) to allow clients to update and manage their own site.
If you would like to see how I can help you, I would love to work with you and see what we can accomplish.
Latest posts by Robert McIntosh (see all)
- Pure CSS3 Animated Tooltips - April 10, 2012
- Pure CSS3 Image Fade In after Page Load - April 3, 2012
- Pure CSS3 Slideshow (Works in Firefox, Safari, and Google Chrome) - October 4, 2011
Pingback: 5 Awesome Tutorials on CSS3 ToolTips()