Tooltip

[RobertP]

Not sure if this is a javascript or a css problem.

 

but when hovering on my tr's in my list, there is padding or something added to the table that makes it jump a little.

 

example: http://bend.gludoe.com/

 

caused by the tooltip i presume.

 

css

div#tooltip{
position:absolute;
z-index:9999;
color:#FFF;
font-size:10px;
width:180px;
background-color:#000;
padding:8px 12px;
border-radius:8px;
}

 

js

$(".tooltip").live("mouseover",function(e){
tip = $(this).attr("title");
if(!tip)
	return;
$(this).attr("title","");
$(this).append("<div id=\"tooltip\">"+tip+"</div>");
}).mousemove(function(e){
$("#tooltip").css("top",e.pageY+10);
$("#tooltip").css("left",e.pageX+20);
}).mouseout(function(){
$(this).attr("title",$("#tooltip").html());
$(this).children("div#tooltip").remove();
});

 

if you can help, i am completely stumped on this :S

[RobertP]

solved

 

js

	$(".tooltip").live("mouseover",function(e){
	tip = $(this).attr("title");
	if(!tip)
		return;
	$(this).attr("title","");
	$("body").append("<div id=\"tooltip\">"+tip+"</div>");
}).mousemove(function(e){
	$("#tooltip").css("top",e.pageY+10);
	$("#tooltip").css("left",e.pageX+20);
}).mouseout(function(){
	$(this).attr("title",$("#tooltip").html());
	$("div#tooltip").remove();
});