A Path Less Taken

qTip is an excellent jQuery plugin created by Craig Thompson. It is built on top of the jQuery Javascript library and allows web developers to build flexible, well formatted and easy to use tool tips. I decided to use qTip for my latest web app and was able to get up and running pretty quickly. I did run into one issue that I thought was worth pointing out to help you avoid the same sticking point that I encountered with my approach.

My start was pretty simple. First I downloaded the latest copy of the qTip javascript include file and included it in the header of my project. The I copied the HTML found here and included it in my main project template just before the closing BODY tag.

This is where it started to get a little sticky. The simple qTip examples show you how to create static, pre-defined tool tips when you create the Javascript for them in your header. This is fine for static sites, but I wanted to have tool tips that were dynamically populated by my application at run time. It was just easier for me to include the tool tip content in my HTML inline as the page was being built than to include it all as part of one big header section. Here is what I settled on for my HTML code.

1

<a class="comment"><img src="/mysite/media/img/comment.png" /><div>My Tool Tip</div></a>

As you can see my strategy here is very simple. I create an anchor tag that contains an image and a div. The image is the display object that the user will hover over to see the tool tip. The DIV contains the actual content of the tool tip. To make sure the div does not appear in-line after the image in the rendered page we add the following CSS.

1

a.comment div { display: none; }

This makes sure the div and it’s content are both hidden and do not displace the DOM elements around them. Next I needed to create the Javascript that was going to display the tool tip when the user hovered over the image and hide it when the user moved their mouse off the image. The issue I encountered was not being able to address the anchor tag such that I could include the div content in the tool tip. I searched the qTip forums and eventually came up with the following code.

1
2
3
4
5
6
7
8
9

$(document).ready (function () {
	$ ('a.comment').each (function (){
		$(this).qtip ({
			content: $('div', this).html (),
			show: 'mouseover',
			hide: 'mouseout'
		});
	});
}) ;

This code simply caused the anchor tag with the comment class to be selected each time the user hovered the mouse over the image. The content attribute in the array was populated by the contents of the first div child of the current (this) object which is the instance of the anchor tag with the comment class hovered over by the user. The qTip tool tip displayed then contained the contents of the div.

That’s all there was to it. With this simple setup I was able to generate tool tips that were notably superior to those created by the title attribute of the anchor tag. What you see here is only the tip of the iceberg in terms of the depth of features that qTip offers. If you need a simple and customizable tool tip solution for your web site or web app you should definitely check out qTip!