Thursday

hover help tooltip function


hover help tooltip function

often I want to do a simple hover help and the libraries I see are bloiated. All I want is to bea ble to occasinoally have an inline link so the hover should remain active.
I pass the text to be placed in the first argument, and the second can be added (or omitted) if I want the hover to remain alive while the mouse moves over the tooltip.

$('#costrating > span').hoverhelp('this is cost rating');
$('#qualityrating > span').hoverhelp('this is quality rating',1);


$.fn.hoverhelp = function(txt,sticky) {
return this.each(function() {
$(this).hover(
function(e){
$T = $(this).position().top+$(this).height();
$L = $(this).position().left;
$('#hhcontent').empty().html(txt);
$('#hoverhelp').css({top:$T,left:$L}).show();
},
function(){
switch(sticky){
case 1 : // use with inline links
$('#hoverhelp').hover(
function(){$(this).show();},
function(){$(this).hide();}
);
break;
default :
$('#hoverhelp').hide();
break;
}
}
);
});
};

No comments: