[jQuery] Tooltip placement
Hi! Sorry for my english, I hope you understand me.
I'm using a tooltip created with Jquery, this is the code:
_________________________________________________________________
this.tooltip = function(){
/* CONFIG */
xOffset = 20;
yOffset = 50;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("600");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});
________________________________________________________________________
If you want to see a preview go in this link and with the mouse over
the image on top-right.
http://www.ivanisevic82.com/pages/prova-8.php
So, my problem is this: i'd like to place the tooltip in a different
place: not with a relative position (relative to che mouse, the
tooltip moves whit it, as you can see in the preview) but an absolute
position.
I would like that the tooltip stay fixed on the right of the image,
and without moving if I move the mouse.
How can I do it?
Can I change the jquery code and "say" to it that the position of the
tooltip has to be definied in the css part of my site?
Thank you!
Bye!