Blufusion.net

Easy Tooltips

Over time, I’ve noticed a lot of scripts and plugins that are available to simply add tooltips to items on a page. Adding a plugin for something that simply is overkill. Adding a plugin for tooltips  typically requires that you include an additional script and an additional stylesheet (depending on which one you use). In this post, I ‘ll show you just how easy it is to create a clean, styled tooltip using jQuery.

Getting Started

I’m going to assume that you already have a web server set up and running and that you already have at least a basic knowledge of how of jQuery.  If you have even a little bit of jQuery knowledge, this should be extremely easy.

There are obviously multiple ways that this tooltip can be created and styled. I won’t go into extensive detail on it, I will just get you started and let you piece things together from there.

Step 1 – Include jQuery

This line will load jQuery from Google’s AJAX API’s. Loading jQuery from Google is considered good practice by many developers because it decreases latency, creates parallelism, and provides caching, meaning user’s may not have to download jQuery at all because it’s already cached on their machine from another site.

Here’s the code:

Step 2 – Pick Your Structure

This is where you determine how you want your tooltips to be organized. There are many, many ways of doing this. For this example, I chose to simply give a link tag a chosen class ‘tooltips’, and within the link tag, include a span object that is hidden.

Example:

Click here for a page
This is my hidden tooltip!

Looks simple enough, right?

Step 3 – Styling Your Popup

You can style your popup any way that you desire. I kept this example simple.

span {
	background:#c8c8c8;
	display:none;
	padding:10px;
	position:absolute;
	z-index:1000;
	-moz-border-radius:4px;
}

That’s it. The display, z-index and the position property are the most important. Setting display to none obvious hides the element until we need it. The position property being set to absolute will allow us to place the popup wherever we want to put it. The z-index property being set to a high value should ensure that the tooltip will stay on top of all other elements.

Step 4 – The jQuery script

We’re down to the last step, creating your jQuery script to display the popup. Once again, this is an extremely easy script.

$(document).ready(function() {
	$(".tooltips").hover(
		function() { $(this).contents("span:last-child").css({ display: "block" }); },
		function() { $(this).contents("span:last-child").css({ display: "none" }); }
	);
	$(".tooltips").mousemove(function(e) {
		var mousex = e.pageX + 10;
		var mousey = e.pageY + 5;
		$(this).contents("span:last-child").css({  top: mousey, left: mousex });
	});
});

Start off by setting a hover event listener to all items that have the tooltip class. The first function within hover handles actions when the mouse is placed over the item, the second function handles actions for when the mouse is removed from the item. Here, we will select the item using the $(this) selector, then find the last span that is a child element of the container. Now that we the span selected, set the display property to block to make it appear. Obviously you would do just the opposite when the mouse was removed.

As an extra touch, I also added the mousemove event to the tooltips items. This event listener will grab the eventObject (e), and determine the location of the mouse when the event occurred. Once the coordinates are retrieved, the position of the tooltip is updated so that the tooltip floats around in relation to the cursor position.

Done

There are multiple ways that these tooltips can be styled, nested, selected, etc. As I said, this is just a basic tooltip to get you started. Experiment with different tooltip positions, layouts, animations to find create the tooltip that best fills your needs.

Click here for working demo

Good luck