jQuery Custom ToolTips

Tooltips are not the most exciting thing about the web. I mean you hover your mouse over a link or image for a couple of seconds and you get some text describing it. With all the really cool web apps out there, tooltips have lost their touch on the web. But, with a little help from jQuery, we can take these boring tips and replace them with our own fancy ones. Since jQuery is quite an amazing library, we can do this in a snap.

Tooltips are not a new feature at all. Most browsers have tooltips built into them, which work off of the title attribute being supplied to HTML tags. Whatever text is in the title attribute is what is displayed in the Tooltip. This is a pretty basic feature, but why fight it? Why not use the title attribute for our tooltips as well? Well, we actually can.

But the browser will also read this attribute and we will end up with a nasty double tooltip, which is never a good sign. In order to use the title attribute, we are going to have to be tricky. To start, let's go over the basics.

For the HMTL side of things, we are keeping it simple in this tutorial. All we need to get the point across are two links, with different "titles":

Now, in order for our custom tooltip to work properly, we need our div to be in the body of our page. To position it correctly, it cannot be inside any other tag. This is why we are going to use jQuery to create the div:

This will put the div inside the body, outside of any other tag. However, in order for the tooltip to start out hidden, and for some extra cool factor, we need to add a style to the div:

This CSS will hide the ToolTipDiv by default, and give it a nice look. Technically, all you need is the positioning and display, but looking good is half the reason to use your own tooltips.

For more on the jQuery side, we need to do a couple things. First we need to show and hide the div when we mouse over an anchor tag. To do this, we are going to find all the anchor tags and iterate through each one:

Using a[title], we can select only the anchors with title attribute. This way we do not end up with any empty tooltips. I mean who wants a tiny empty box floating around?

Inside our loop, we need to set the hover in and hover out events to show/hide the ToolTip. For extra effect, we are going to use the fadeIn and fadeOut functions to do the show/hide, which give use a little more fanciness. For the hover in/out event, we use the hover event helper jQuery provides:

What this jQuery code is doing is taking each anchor, then adding a hover event. This helper provides a hover over, and a hover out event. The first argument is the hover over function, and the second is the hover out. In the over, we "fade in" the ToolTip, and of course we "fade out" when we mouse out. We are also adding a stop command, so the current animation stops before playing a new fade in/out. This way we avoid conflicting animations, which can cause flashing.

As of right now, all we are doing is showing and hiding the tooltip. We need to reposition it as well. To do this, we are going to use a mousemove event, and the position of the mouse. Luckily, jQuery makes this easy:

We are taking the anchor, and adding a mousemove event that repositions the tooltip div using CSS. We also capture the mouse coordinates, then offset them so they are roughly at the corner of your pointer. You get these mouse coordinates using pageY and pageX, which are properties of the object returned during the event.

With the position correct, all we have to do is fill the tooltip with the text from the title attribute. But in order to keep the browser's tooltips from working, we are going to remove the attribute when we mouse over, then reset it when we mouse out. To reset it, we simply use the Tooltip div's text:

Using the title attribute, we maintain the tooltip functionality, even when javascript is disabled. They won't be our custom ones, but the browser may still give you it's tooltip.

Using CSS and jQuery, the possibilities for our ToolTips is endless. You can style it, or add the tooltip to any element you want. There are even some easy to use jQuery plugins for more complex tooltips.

Well, now you know how to make simple custom tooltips using jQuery. Fortunately, it has been pretty simple. This is it for now, but just remember: if you need coding help, just Switch On The Code. If you have any questions feel free to leave a comment or check out our forums.