Not know why tooltip box(class “.show_tooltip”) there is left when mouse enter on “li a”, i want display each tooltip box top same link that mouse is enter on it and if the width and height was more or less it is same style.(i want links put in right) DEMO
I want example this (for how): what do i do?
http://i.stack.imgur.com/5KGQC.gif
CSS:
.show_tooltip{
background-color: #E5F4FE;
display: none;
padding: 5px 10px;
border: #5A5959 1px solid;
position: absolute;
z-index: 9999;
color: #0C0C0C;
/*margin: 0 0 0 0;
top: 0;
bottom: 0;*/
}
HTML:
jQuery:
$("li a").mouseenter(function(){
$(this).prev().fadeIn();
}).mousemove(function(e) {
$('.tooltip').css('bottom', e.pageY - 10);
$('.tooltip').css('right', e.pageX + 10);
}).mouseout(function(){
$(this).prev().fadeOut();
})