jquery live tooltip ***TUTORIAL***

[Torniquet]

heya,

i love jquery and i love tooltips :p

problem is on any pages featuring dynamically loaded javascript content, any new parts which you want a tooltip on, wont have. Getting the tooltips to appear can be tricky if you are using a prebuilt tooltip. I have used various ones i have found out there, and many of them have buggered up when i reload the tooltip.

Well i finially found a solution to this problem, and now i will share

Firstly to set up the CSS.

pretty simple stuff, this can be coloured any way you wish. There are only a couple of specific things that must be included to make this work.

Code: Select all

#tooltip {
	position: absolute;
	z-index: 999;
	display: none;
	background-color: #dfdddd;
	border: thin ridge #000000;
	padding: 7px;
	text-align:left;
	font-size:10px;
	min-width: 100px;
}

the attributes which are vital are the following.

Position must be set to absolute, this will allow the tooltip to be freeflowing without disturbing any other content on the page.
z-index needs to be set to a large value to that it appears ontop of every other element on the page.
display (although optional in the long run, but to allow the transition to work, this is vital) setting this to none will hide render the tooltip invisable.

everything else can be altered and poked and stretched to your desire.


ok now for the jquery code.

we will be using the 'live' event to trigger the effects and control of the tooltip. We also need to target a specific element on the page. I will be targeting all 'a' tags with a class of 'js_tipped' (remember an element can hold more than one class)

Code: Select all

$('a.js_tipped').live(function(){
//code here
});

along with the statment 'function', the live event also carries an event listener. These can be any type of events, 'click', 'mouseover' etc

we want to use 2 functions, mouseover and mouseout. in addition we need a variable to reference the listener to. We will place the variable inside the brackets of 'function'.

Code: Select all

.live("mouseover mouseout",function(e)

the variable 'e' will hold the listeners event.

now we need to create actions depending on what event takes place.

inside the event, we will place some if statments to select the action to take place.

Code: Select all

if(e.type == "mouseover"){
//mouseover code
} else {
//mouseout code
}

this is saying that if the event type is a mouseover event, then we need to execute one block of code, else we need to execute the other block.

e.type references to the variable event 'e' type.

lets focus on the mouseover code to start the ball rolling.

we need to create a variable which will hold the tooltip text. For this we will use the tags 'title' attribute.


This code is to be placed under the 1st if statment.

Code: Select all

var tip = $(this).attr('title');
$(this).attr('title','');

the 1st line is assigning the variable 'tip' the contents of the tags 'title' attribute.
the 2nd line then removes the tags title making it empty and turning off the browsers standard tooltip.

now we have set up the tooltip variable and removed the standard tooltip, we need to add our tooltip to the page itself. This will be done by appending a div to the body and filling it with the contents of the variable 'tip'.

on the next line, we will add the following.

Code: Select all

$('body').append('div id="tooltip">' + tip + '</div>');

now, when we mouseover our element, a new div is placed at the end of the page containing the content of the title attribute to the element we have moused over.

currently the whole code looks like this.

Code: Select all

$('a.js_tipped').live("mouseover mouseout",function(e){
	if (e.type == "mouseover"){
		var tip = $(this).attr('title');
		$(this).attr('title','');
		$('body').append('<div id="tooltip">' + tip + '</div>');
         } else {
         }
});

now if you are using the same css style as me, the div display status is currently set to none, which is no good because even if the tooltip was working, you wouldnt be able to see it.

So now we want to add in a nice fade in transition to show it. In addition we will add a slight fade out to make it slightly transparent aswell.

under the body append we want to add the transition code.

Code: Select all

$('#tooltip').fadeIn('500');
$('#tooltip').fadeTo('100',0.9);

The fadeIn function is targeted at the newly created tooltip div. this will make the tooltip fade into the display status of 'block' over 500 milliseconds. The fadeTo function will make the tooltip fade back out to an opacity level of 90% after 100 milliseconds.

ok. so now we have made the tooltip appear, we have filled the tooltip with content. Now we want to make the tooltip follow the mouse around untill the mouseout event is activated.

we can do this by using the mousemove event function. This will track the mouses location by using another variable listener, pageX and pageY variables.

so now we need to add this in under the fade transitions.

Code: Select all

$(this).mousemove(function(e){
	$('#tooltip').css('top', e.pageY + 20 );
	$('#tooltip').css('left', e.pageX + 20 );
});

this event listens for any movement while the cursor is over the targeted element, and resets the tooltips top and left attributes to a new location, thus making the tooltip follow the mouse. by adding +20 to both the y and x axis, we are moving the tooltips position away from the cursors center location.

ok nearly done.

all we need to do is create the action for the mouseout event.

when we do this, we will completly remove the tooltip and destroy it. to make the tooltip reusable, we will also re-add the content of the title attribute to the element we took it from.

so now in the else statment, we want to add these 2 simple lines of code.

Code: Select all

$(this).attr('title',$('#tooltip').html());
$('body').children('div#tooltip').remove()

the 1st line is resetting the elements title content, which is straight forward.

the 2nd line we are saying we need to remove the tooltip. we do this by firstly targeting the body in which we appended the tooltip to, then we select the child element which is a div, with an id of tooltip. then removing it from the page.

the finished jquery code looks like this.

Code: Select all

// JavaScript Document
$('a.js_tipped').live("mouseover mouseout",function(e){
	if (e.type == "mouseover"){
		var tip = $(this).attr('title');
		$(this).attr('title','');
		$('body').append('<div id="tooltip">' + tip + '</div>');
		$('#tooltip').fadeIn('500');
		$('#tooltip').fadeTo('100',0.9);
		$(this).mousemove(function(e){
			$('#tooltip').css('top', e.pageY + 20 );
			$('#tooltip').css('left', e.pageX + 20 );
		});
	} else {
		$(this).attr('title',$('#tooltip').html());
		$('body').children('div#tooltip').remove();
	}
});

in addition to working all the time, even with elemnts added in via javascript, by adding HTML tags inside the title, it will also output these html tags as desired.


Hope this all makes sense. its all fairly straight forward. I will put up a working example later on.


have fun xxx

[ConceptDestiny]

Awesome code man, nice one!