Simple tooltip powered by jQuery
tagged JavaScript by Jon
A great user interface acts as a teacher. It should bring new users up to an intermediate level of experience quickly. Anyone can appreciate a video game that lets them dive in and play without ever needing to pick up the manual. Many games offer help text that appears at key moments to teach the player how the game works.
The web has a lot to learn from video game interfaces. Adding tooltips is an effective way to quickly bring users up to speed so that they never feel the need to find the help manual.
Here is an example of one.
What is a Tooltip?
A tooltip is help text that appears when you hover your cursor over something. The title attribute of a hyperlink or alt attribute of an image tag will be displayed as a tooltip by a browser when you hover your cursor over them.
For example, hover over -> this
These are useful attributes. They should be added to every image and hyperlink. At least for the sake of adding some meaningful metadata.
Why Simple?
Tooltips should be simple and focused on their purpose. Adding extra functionality like a close button or draggability is not necessary. When you hover over a tooltip indicator it should quickly appear, display its message, then quickly disappear when you move your cursor away.
Most people would agree that the ad bubbles that pop up when you accidentally hover over certain keywords are incredibly annoying. This is because they take a while to load, are completely overloaded with information and require you to find the close button to get rid of the damn thing. Good example of bad UI design.
Step 1: The Graphics
First, you will want to chop up the graphics that will be needed. Actually, graphics aren’t completely necessary but I wanted to make things interesting.
The above is a diagram of how I made and chopped up a speech bubble looking container for my tooltip. It consists of a the top and bottom portion as well as a thin slice of gradient that will be repeated horizontally in the background of the middle portion. I named them “bubbleTop.gif”, “bubbleMid.gif” and “bubbleBtm.gif”.
Slice these out and save them as a gif or png to retain the transparency. Put them in an images folder.
You will want to use an icon as an indicator so that people can identify the tooltips. I used one from famfamfam’s silk icon set. I totally recommend having these icons on hand while developing your websites. They are very well done and, even better, distributed through a Creative Commons Attribution License.
Step 2: The HTML
The HTML required on the front end for this tooltip is extremely simple. Simply add an span tag (however, almost any inline HTML element will work) with a descriptive title attribute. Then, add the class ‘toolTip’. This will act as a hook for the jQuery code we are about to write.
-
-
<span title="This is the tooltip text"> </span>
-
The span tag should look something like this.
The tooltip will be structured like this.
There are four div containers, each with an individual class. The first is a wrapper that holds everything together. Then the top, middle and bottom sections of the tooltip. This will all be dynamically inserted into the element with the toolTip class by jQuery
Step 4: The CSS
Here is all the CSS that is needed.
-
-
.toolTip {
-
padding-right: 20px;
-
background: url(images/help.gif) no-repeat right;
-
color: #3366FF;
-
cursor: help;
-
position: relative;
-
}
-
.toolTipWrapper {
-
width: 175px;
-
position: absolute;
-
top: 20px;
-
display: none;
-
color: #FFF;
-
font-weight: bold;
-
font-size: 9pt;
-
}
-
.toolTipTop {
-
width: 175px;
-
height: 30px;
-
background: url(images/bubbleTop.gif) no-repeat;
-
}
-
.toolTipMid {
-
padding: 8px 15px;
-
background: #A1D40A url(images/bubbleMid.gif) repeat-x top;
-
}
-
.toolTipBtm {
-
height: 13px;
-
background: url(images/bubbleBtm.gif) no-repeat;
-
}
-
Now, I’ll go through and explain all of this…
In the toolTip class, the help icon is placed in the background and positioned to the right. Right padding is added to assure that the icon is always visible.
I set the cursor to ‘help’ because it acts as a good visual cue and defines the tooltip as help text.
The tooltip will be generated inside of the HTML element with this class. It needs to be positioned relative so that it will contain the absolutely positioned toolTipWrapper class.
The toolTipWrapper class needs a width to hold the pieces inside together. It needs an absolute position so that it will hover on top of the page content. It’s left coordinates will be dynamically set with jQuery.
Display none is needed in order for the fade-in and fade-out effects to work.
A font size is set so that it stays consistent regardless of what HTML element it is placed in.
The rest of the classes are used to build the tooltip itself.
Step 5: The jQuery
This is the jQuery script that makes the magic happen:
-
-
$(document).ready(function() {
-
$(‘.toolTip’).hover(
-
function() {
-
this.tip = this.title;
-
$(this).append(
-
‘<div class="toolTipWrapper">’
-
+‘<div class="toolTipTop"></div>’
-
+‘<div class="toolTipMid">’
-
+this.tip
-
+‘</div>’
-
+‘<div class="toolTipBtm"></div>’
-
+‘</div>’
-
);
-
this.title = "";
-
this.width = $(this).width();
-
$(this).find(‘.toolTipWrapper’).css({left:this.width-22})
-
$(‘.toolTipWrapper’).fadeIn(300);
-
},
-
function() {
-
$(‘.toolTipWrapper’).fadeOut(100);
-
$(this).children().remove();
-
this.title = this.tip;
-
}
-
);
-
});
-
If you are not already familiar with jQuery, I would strongly encourage you to take the time to learn it.
-
-
$(‘.toolTip’).hover(
-
The script uses jQuery’s hover() function. There are two individual functions inside of it that make up the mouse-over and mouse-out.
-
-
this.tip = this.title;
-
In the first half of the hover() function, the script grabs the content inside of the title attribute and makes a variable out of it.
-
-
$(this).append(
-
It then uses append() to insert the HTML that makes up the tooltip and places the title contents into it.
-
-
this.title = "";
-
The title is set to an empty string so that the browser default tooltip doesn’t appear as well.
-
-
this.width = $(this).width();
-
$(this).find(‘.toolTipWrapper’).css({left:this.width-22})
-
Then, the width of the element with the toolTip class is taken and the toolTipWrapper is given left coordinates so that it is always positioned directly beneath the help icon.
-
-
$(‘.toolTipWrapper’).fadeIn(300);
-
The function fadein() is used to gradually bring in the tooltip. It also acts as a safeguard to keep it from popping up if someone accidentally hovers over it.
-
-
function() {
-
$(‘.toolTipWrapper’).fadeOut(100);
-
$(this).children().remove();
-
this.title = this.tip;
-
}
-
The second half of the hover() function resets everything and puts things back to normal. The fadeout() function is used to hide it.
Conclusion
This script was originally inspired by a project I worked on recently that required a little something to help people understand the application.
The tooltip in this tutorial is a simplified version of what I built for that project. I wanted to keep it very simple and leave room for you to experiment with and add additional features.
But remember, too many features is a bad thing. Keep it simple and add only the features that are needed to fulfill your website’s needs.
Get the source files here.
Leave your mark...
If you liked this article please leave a comment and share it.
Add a comment Digg Stumble Upon Reddit