Ahhh... tooltips. They can be the answer to many of your support worries or if you just want to give a little hint to the user. Today there are tons of websites and applications out there using tooltips but... is there a better way to implement them? I'm excited to say that there is a better way, a Javascript free way... well for the most part. We're going to be making some really awesome tooltips out of pure CSS3 and then we're going to create a mobile friendly version, and this is where it gets a little hazy because to get this to work, we have to use a little Javascript fix known as none other than Dean Edwards IE9.js.
Note: There is full IE support for versions 8 and up. IE7 is also supported except for the mobile version (clickable version).
The Video Tutorial
For everyone who wants a peek into how Justin creates this in living color, check out the video below!
The Written Tutorial
And now, the full written step by step guide with fully coded instructions. Be sure to grab the source file download from up above as well!
Step 1 Creating the Markup
In the Head
Let's start by creating the head of our document and then insert a stylsheet specifically for this tutorial. You can delete the tut.css stylesheet when implementing this in your own project, it is used only for this tutorial.
We've used the HTML5 doctype which is !DOCTYPE html and then called our two stylesheets. The first stylesheet is the transparency version but there are more themes to choose from in the source files. The second on is the tut.css we talked about and is only used for the purposes of styling this tutorial, but feel free to use it if you like.
After the stylesheets, is our less than IE9 statement. We've used an ie.css file which calls on CSSPIE telling IE 7 & 8 that it's ok to use CSS3 features because they're awesome! Then we called on Dean Edwards IE9.js to further tell IE7 & 8 that we need to make this work by using advanced CSS selectors.
1 |
|
2 |
<!DOCTYPE html>
|
3 |
<head>
|
4 |
<meta charset=utf-8 /> |
5 |
<title>CSS3 Tooltips - Hover & Clickable</title> |
6 |
<link rel="stylesheet" href="styles/themes/tip-transparency.css" /> |
7 |
<link rel="stylesheet" href="styles/tut.css" /> |
8 |
|
9 |
<!--[if lt IE 9]>
|
10 |
<link rel="stylesheet" href="styles/ie.css" media="screen" />
|
11 |
<script src="https://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
12 |
<![endif]-->
|
13 |
|
14 |
</head>
|
15 |
|
16 |
<body>
|
17 |
|
18 |
</body>
|
19 |
</html>
|
"The user will be able to move their mouse from your the element to the tooltip in order to click on links."
The Websafe Tooltip
Now that we have our head created, the next thing will be to create the markup for our first tooltip. For this tutorial we're going to use an unordered list but you can use anything because in the CSS we only used the class name instead of selecting the list itself making it possible to simply insert the classes anywhere you like.
The tip class (ie: li class="tip") is used for the text or image that will be hovered over to show the tooltip. Inside of that we've added a link with a hash and the hash is so that our link is accessible.
After the tip class is the tooltipL class (ie: strong class="tooltipL") which is used for any tooltips that will show to the left of your hover element, in this case the first link.
It's even possible to add images and links inside of your tooltip. The user will be able to move their mouse from the hover element to the tooltip in order to click on links; this functionality is taken care of in the stylehseet which we'll discuss later in this tutorial.
1 |
|
2 |
<ul>
|
3 |
<li class="tip"><a href="#">Left Tip</a><strong class="tooltipL">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" height="80" width="80" alt="" /><a href="#"> You can even add links!</a></strong></li> |
Following the example above will be the rest of the tooltips we'll be creating. Essentially everything will be the same for each tooltip. The only differences or the classes. Instead of tooltipL, we have .tooltipR for all tooltips placed to the right of the hover element, .tooltipB which is placed at the bottom and .tooltipT which is placed at the top. Any time you want to add a new tooltip to your project, all you have to do is use one of these classes depending on where you would like the tooltip to show.
1 |
|
2 |
<li class="tip"><a href="#">Right Tip</a><strong class="tooltipR">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" height="80" width="80" alt="" /><a href="#"> You can even add links!</a></strong></li> |
3 |
|
4 |
<li class="tip"><a href="#">Bottom Tip</a><strong class="tooltipB">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" height="80" width="80" alt="" /><a href="#"> You can even add links!</a></strong></li> |
5 |
|
6 |
<li class="tip"><a href="#">Top Tip</a><strong class="tooltipT">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" height="80" width="80" alt="" /><a href="#"> You can even add links!</a></strong></li> |
7 |
</ul>
|
The Mobile Friendly Tooltip
The main difference between this type of tooltip and the websafe version is that we use a different class (ie: .tipClick) and simply make it clickable. On mobile phones you can't hover over something like a tooltip to make it appear so this version solves that issue. It's also great for action oriented content.
1 |
|
2 |
<ul>
|
3 |
<li class="tipClick"><a href="#">Left Tip</a><strong class="tooltipL">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" height="80" width="80" alt="" /><a href="#"> You can even add links!</a></strong></li> |
4 |
|
5 |
<li class="tipClick"><a href="#">Right Tip</a><strong class="tooltipR">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" height="80" width="80" alt="" /><a href="#"> You can even add links!</a></strong></li> |
6 |
|
7 |
<li class="tipClick"><a href="#">Bottom Tip</a><strong class="tooltipB">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" height="80" width="80" alt="" /><a href="#"> You can even add links!</a></strong></li> |
8 |
|
9 |
<li class="tipClick"><a href="#">Top Tip</a><strong class="tooltipT">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" height="80" width="80" alt="" /><a href="#"> You can even add links!</a></strong></li> |
10 |
</ul>
|
That's all there is too the HTML markup. Now let's take a look at some CSS to make this baby functional!
Step 2 Making it Functional & Creating Styles with CSS
For this tutorial we are going to use the tip-transparency.css style but once again, there are more styles to choose from so pick whichever you like to follow along.
To start off we are going to add some styles to our main classes.
Here we add a position of relative and a display of inline-block so that the tooltip stays inline with the hover element.
1 |
|
2 |
.tip, .tipClick{ /* This is any element that has a tooltip attached too it */ |
3 |
position:relative !important; |
4 |
display:inline-block; |
5 |
}
|
Next we want to hide all of the tooltips until they are either hovered over or clicked on. To do that we'll simply select the class for each direction and use a display: none
1 |
|
2 |
.tip > .tooltipL, |
3 |
.tip > .tooltipB, |
4 |
.tip > .tooltipR, |
5 |
.tip > .tooltipT, |
6 |
.tipClick > .tooltipL, |
7 |
.tipClick > .tooltipB, |
8 |
.tipClick > .tooltipR, |
9 |
.tipClick > .tooltipT{ /* Used to hide the tooltip */ |
10 |
display:none; |
11 |
}
|
To show the tooltip when hovered or clicked on, we'll do the exact opposite as hiding it and use a display: block after selecting the class for each direction.
For the clickable tooltips we're going to add a focus to the hovered element (ie: the first link) and then we'll immediately match the preceeding tooltip by using the plus selector (ie: a:focus + .tooltipL).
1 |
|
2 |
.tip:hover > .tooltipL, |
3 |
.tip:hover > .tooltipB, |
4 |
.tip:hover > .tooltipR, |
5 |
.tip:hover > .tooltipT, /* This shows the tooltip when an elements with the .tip class is hovered over */ |
6 |
.tipClick > a:focus + .tooltipL, |
7 |
.tipClick > a:focus + .tooltipB, |
8 |
.tipClick > a:focus + .tooltipR, |
9 |
.tipClick > a:focus + .tooltipT{ /* This shows the tooltip once an element with the .tipClick class is clicked */ |
10 |
display:block; |
11 |
}
|
Now that we have a workable tooltip, let's go ahead and style them. For the most part, each tooltip whether left, right, top or bottom will be the same except for a few differences which I will explain later.
As you can see we want each tooltip to look the same, so they have common backgrounds using an 85% opacity. There is a box shadow to add a little bit of depth, along with solid border to separate the inner-content.
A few important facts here are... the min-width:200px to keep the arrow inline with the hover element, a postion of absolute so that we can show the tooltip without affecting any of its surrounding elements, and a z-index of 10 so that the tooltip is always on top.
1 |
|
2 |
.tooltipL, .tooltipR, .tooltipB, .tooltipT{ |
3 |
background: #333333; /* old browsers */ |
4 |
background: rgba(0,0,0,0.85); /* For IE9 */ |
5 |
background: -moz-linear-gradient(top, rgba(51,51,51,0.85) 0%, rgba(0,0,0,0.85) 100%); /* firefox */ |
6 |
background: linear-gradient(top, rgba(51,51,51,0.85) 0%, rgba(0,0,0,0.85) 100%); /* future browsers */ |
7 |
-pie-background: linear-gradient(top, rgba(51,51,51,0.25) 0%, rgba(0,0,0,0.25) 100%); /* pie for less than ie9 */ |
8 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,0.85)), color-stop(100%,rgba(0,0,0,0.85))); /* webkit */ |
9 |
-moz-box-shadow: 0 0 6px 1px #666666; |
10 |
-webkit-box-shadow: 0 0 6px 1px #666666; |
11 |
box-shadow: 0 0 6px 1px #666666; |
12 |
border:solid #FFFFFF; |
13 |
color: #E7E7E7; |
14 |
min-width:200px; |
15 |
padding: 5px; |
16 |
position: absolute; |
17 |
text-align: center; |
18 |
z-index: 10; |
19 |
}
|
So for the differences in each tooltip is where they are positioned relative to the hover element. These values seemed to work the best and should not have to be changed, however if they do need to be changed to fit with your project then the best solution would be to use a dynamic repositioning using javascript... but that is beyond the scope of this tutorial.
By looking at the CSS code below you can see that we have to repostition the tooltips so that they are inline with their respective hover element, whereas using a relative position on the main classes kept the tooltips contained inside the hover element, it does not position them next to it.
1 |
|
2 |
.tooltipL{ /* The styling on the tooltip */ |
3 |
left: -226px; |
4 |
margin-top: -28px; |
5 |
}
|
6 |
|
7 |
.tooltipB{ /* The styling on the tooltip */ |
8 |
top: 30px; |
9 |
left: -183px; |
10 |
}
|
11 |
|
12 |
.tooltipR{ /* The styling on the tooltip */ |
13 |
right: -226px; |
14 |
margin-top: -28px; |
15 |
}
|
16 |
|
17 |
.tooltipT{ /* The styling on the tooltip */ |
18 |
bottom:26px; |
19 |
left: -186px; |
20 |
}
|
Almost finished! Now we need to create the arrow for our tooltip which will point towards the hover element. Again, there are a few differences which I will show you later.
So looking at the code below, we will insert the arrow "before" each tooltip. What's important here and why we can make an arrow using CSS is the "content" declaration. We'll add a position of absolute so that we can position the arrow however we want. Put a display: block and a height/width of 0, along with a solid 10 pixel border which will act as our actual arrow.
1 |
|
2 |
.tooltipL:before, .tooltipR:before, .tooltipB:before, .tooltipT:before{ |
3 |
border-style: solid; |
4 |
border-width: 10px; |
5 |
height:0px; |
6 |
width:0px; |
7 |
position:absolute; |
8 |
display:block; |
9 |
content:"\00a0"; |
10 |
}
|
The difference here is what direction we want the arrow to be pointing and for that we use a solid background for one side and a transparent background for the rest. Also we have to move each one down from the top and to the right and bump the arrow flush with the tooltip so that it looks like on element.
1 |
|
2 |
.tooltipL:before{ |
3 |
border-color: transparent transparent transparent #333333; /* Right facing arrow */ |
4 |
top:5px; |
5 |
right:-20px; |
6 |
}
|
7 |
|
8 |
.tooltipB:before{ |
9 |
border-color: transparent transparent #333333 transparent; /* Top facing arrow */ |
10 |
right:5px; |
11 |
top:-20px; |
12 |
}
|
13 |
|
14 |
.tooltipR:before{ |
15 |
border-color: transparent #333333 transparent transparent; /* Left facing arrow */ |
16 |
top:5px; |
17 |
left:-20px; |
18 |
}
|
19 |
|
20 |
.tooltipT:before{ |
21 |
border-color: #333333 transparent transparent transparent; /* Bottom facing arrow */ |
22 |
right:5px; |
23 |
bottom:-20px; |
24 |
}
|
After you've completed that, you're all done, and the final result should look something like the image below. If it doesn't look like the image, please go back and check your code... you may have missed something... probably something small.
In order to make yours look exactly like the tut, we need to use tut.css and that code should look like this...
1 |
|
2 |
body{background: url(images/maintenance/bg.png) repeat-x #252C2E;} |
3 |
|
4 |
a{color:#FFE25F;} |
5 |
|
6 |
a:hover{color:#CFE25F;} |
7 |
|
8 |
img{border:none;} |
9 |
|
10 |
li.tip, li.tipClick {margin-right:30px; margin-left:30px; display:inline;} |
11 |
|
12 |
.tip > a, .tipClick > a{font-size:18px;} |
13 |
|
14 |
h2{color:#d2d2d2; text-align:center; font-size:36px; position:relative;} |
15 |
|
16 |
ul > h2{color:#999;} |
17 |
|
18 |
ul{margin: 0 auto;position: relative;text-align: center;top: 130px;width: 960px;} |
19 |
|
20 |
li.tip > a, li.tipClick > a{color:#CCC;} |
21 |
|
22 |
img.ref{margin:0 auto; display:block;} |
All Done!
Congrats! You're now finished making some really awesome tooltips without using a lick of javascript except to make IE 7 & 8 behave. I sincerely hope you enjoyed this tutorial and that you were able to learn something valuable.
Remeber, be patient and keep soaking up as much knowledge as you can and before you know it you'll be a master at whatever you do!
