How to Create Simple jQuery Tooltip

There are so many jQuery Tooltip we can find on Google.  However, sometimes we just need something simple. So, why don’t you create your own?

Basic

• This tooltip would replace title attribute of an HTML element.
• This tooltip text is extracted from the title attribute.
• This tooltip is compatible with common modern browser.
• This is not a jQuery plugin.

Logic

When cursor over on an element with title attribute, normally it will display a tooltip. Extract that title attribute, save it to a variable and remove original title attribute (to prevent original title being displayed).
Create a div element next to current element with position absolute, hidden, and fill it up with extracted title text. Finally, display that div when mouse over on it.

Then what happen when mouse cursor leaves the element? Simply, restore title attribute, and hide or remove tooltip.

Do it your self

Below is the code with explanation comment.

Mouse Enter

$('.poptip').mouseenter(function(){
var text = $(this).attr('title'); //extract title, save to "text" variable
var posi = $(this).position();
var top  = posi.top; //top position
var left = posi.left+5; //left position
var wid	 = $(this).width(); //element width
$(this).attr('title',''); //remove original title
$(this).parent().append(''+text.replace('|','')+''); //create div element with class .poptext, and fill with extracted title.

//some css styling
	$('.poptext').css({'left':(left+wid)+'px',
				'top':(top-$('.poptext').height())+'px',
				'background':'#fffeee',
				'border':'1px solid #f7a229',
				'display':'none',
				'position':'absolute',
				'z-index':'1000',
				'padding':'5px',
				'font-size':'0.8em'
	});

//show tooltip, slowly 
	$('.poptext').fadeIn('slow');
});

Mouse Leave

$('.poptip').mouseleave(function(){
	var title = $(this).parent().find('.poptext').html(); //restore title text from tooltip
	$(this).attr('title',title.replace('','|')); //place it back to title attribute
	$(this).parent().find('.poptext').fadeOut('slow'); //hide tooltip
	$(this).parent().find('.poptext').remove(); //remove element.
});

Usage/Example

You’re done.