[jQuery] trouble with tooltip, i know soem ways to fix but not how to implement
hi i am having trouble finding an answer to this by searching. i have
this tooltip script for blowing up thumbnails. the original would
positioon the element based on offset mouse position but that would
take my element off the screen if the thumbnail was on the right or
left. now i have it fixed position in the middle but cannot find how
to keep the blowup stable if the mouse is where the element pops up.
If i could disregard the pointer from the popup or stear it away from
the cursor or use the original script utilizing the mouseposition -
offset but keep it from flowing off of the page it could work but no
luck. anyone have any ideas?
here is the code below and also the problem can be seen on the bottom
of this page(members module)
http://undergroundinnertainment.com/2009/index.php?option=com_resource&view=list&category_id=14&Itemid=56
* Image preview script
* powered by jQuery (http://www.jQuery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jQuery
*
*/
this.imagePreview = function(){
/* CONFIG */
xOffset = 500;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
jQuery("#contentM a").mouseenter(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
var pathin = jQuery(this).attr('id');
jQuery("#main-body").append("<p id='preview'><img src='"+ pathin +"'
alt='Image preview' />"+ c +"");
jQuery("#preview")
.css("position","fixed")
.css("top","20%")
.css("left","40%")
.fadeIn("fast");
}).bind("mouseleave", function(){
this.title = this.t;
jQuery("#preview").remove();
});
//jQuery("a.previeww").mousemove(function(e){
// jQuery("#preview")
//.css("position","fixed")
// .css("top","20%")
//.css("left","40%")
//});
};
// starting the script on page load
jQuery(document).ready(function(){
imagePreview();
});