"Innovation comes only from readily and seamlessly sharing information rather than hoarding it."- Tom Peters
Development Blog

Putting links into jTip

Tooltips are sometimes a great asset on a website.  But, wouldn't it be great to be able to put a link in a tooltip, and not worry about it disappearing the second you mouse off of it?  Well, this tutorial will help you solve that. 


First of all, you will need the jTip library, which can be found here. Now, I recognize that this tooltip plugin is no longer supported, but a lot of people are still using it. So, for those people this is for you. If you want to check out the newer one, look up clueTip.

The Additional Code

If you open the jtip.js file, you will see that when the document loads, it starts the JT_init() function. This function sets a hover function on any link that has the class jTip. We want to modify this just a tad-bit to allow a tooltip to be shown after you mouse off.

Of course, we don't want ALL tooltips to do this. We will add a new class called "extendedJtip" that will represent a tooltip that we want to stay open for an extended period of time.

Let's replace the JT_init() function with this:

$("a.jTip").hover(
	function() {	//Onmouseover
		$('#JT').remove(); 
		clearTimeout(jTipTimeout); 
		JT_show(this.href,this.id,this.name)
	},
	function()	//Onmouseout
		if (!$('#' + this.id).parent().hasClass("extendedJtip"))
			$('#JT').remove()
		else jTipTimeout = setTimeout(function() {$('#JT').remove()}, jTipTimeDelay);
	}
);

Let's break this down a little... The code has more detailed mouseover and mouseoff functions. The mouseover function will first remove any opened tooltip, clear the timer (if any is set), and then show the new tooltip. This is basically a combination of the two functions in the original script. The mouseoff function is where the main difference occurs. It checks to see if it has the extendedJtip class. If not, it'll just remove the tooltip. Otherwise, a timer will be set to remove the tooltip after the duration set in jTipTimeDelay.

In order to make the timer, you will need to create the timer variable, and the timer duration. These will need to be global variables (not in the JT_init() function). You can either put them in your own script, or in the actual jtip.js file. These variables are jTipTimeout, and jTipTimeDelay. You can do it like this:

var jTipTimeout;			//Stores the setTimeout for the delayed tooltip.
var jTipTimeDelay = 2000;							//Delay of header tooltip for disappearance (in milliseconds)

 

Now that we have that, it's basically ready to go. For any tooltip that you want to be extended, just add the class extendedJtip to the link. And, there you go! Feel free to check out the demo below.

Also, if you have any suggestions on how I can optimize my code, please let me know! Thanks!

AttachmentSize
jtip-extendedHover.js3.92 KB