css - jquery - tooltip moves away in position relative -

css - jquery - tooltip moves away in position relative -

i got tooltip:

$(document).ready(function() { //tooltips $(".tip_trigger").hover(function(){ tip = $("body").find('.tip'); tip.show(); //show tooltip }, function() { tip.hide(); //hide tooltip }).mousemove(function(e) { var mousex = e.pagex + 20; //get x coodrinates var mousey = e.pagey + 20; //get y coordinates var tipwidth = tip.width(); //find width of tooltip var tipheight = tip.height(); //find height of tooltip //distance of element right border of viewport var tipvisx = $(window).width() - (mousex + tipwidth); //distance of element bottom of viewport var tipvisy = $(window).height() - (mousey + tipheight); if ( tipvisx < 20 ) { //if tooltip exceeds x coordinate of viewport mousex = e.pagex - tipwidth - 20; } if ( tipvisy < 20 ) { //if tooltip exceeds y coordinate of viewport mousey = e.pagey - tipheight - 20; } tip.css({ top: mousey, left: mousex }); }); });

and css:

.tip { color: #fff; background:#1d1d1d; display:none; padding:10px; position:relative;z-index:1000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

how use:

<a class="tip_trigger"><span class="tip">this show in tooltip</span></a>

the problem: when tooltip within element position: relative, tooltip coodrinates changes, , tooltip moves away...

i guess happens because tooltip div position: absolute, how can prepare ?

hope understand me, english language not good....

edit 1:

full explanation image:

edit 2: uploaded website can see in live... url is: http://superdown.me/gladiator. put @ both fields value: "admin" (username , password).

after login, hover mouse @ "37.5%", you'll see @ top of page.

make .tip_trigger position relative:

.tip_trigger { position: relative; }

and reposition .tip. within relatively positioned item , should consistent.

jquery css position tooltip