How would I modify the Ajax Tooltip script v1.2 to keep it from fading on mouseout. Would like to click outside the tooltip or when another tooltip is hovered over. Any help would be appreciated....
Code:
//Ajax Tooltip script: By JavaScript Kit: http://www.javascriptkit.com
//Last update (July 10th, 08'): Modified tooltip to follow mouse, added Ajax "loading" message.
var ajaxtooltip={
fadeeffect: [true, 300], //enable Fade? [true/false, duration_milliseconds]
useroffset: [10, 10], //additional x and y offset of tooltip from mouse cursor, respectively
loadingHTML: '<div style="font-style:italic"><img src="ajaxload.gif" /> Fetching Tooltip...</div>',
positiontip:function($tooltip, e){
var docwidth=(window.innerWidth)? window.innerWidth-15 : ajaxtooltip.iebody.clientWidth-15
var docheight=(window.innerHeight)? window.innerHeight-18 : ajaxtooltip.iebody.clientHeight-15
var twidth=$tooltip.get(0).offsetWidth
var theight=$tooltip.get(0).offsetHeight
var tipx=e.pageX+this.useroffset[0]
var tipy=e.pageY+this.useroffset[1]
tipx=(e.clientX+twidth>docwidth)? tipx-twidth-(2*this.useroffset[0]) : tipx //account for right edge
tipy=(e.clientY+theight>docheight)? tipy-theight-(2*this.useroffset[0]) : tipy //account for bottom edge
$tooltip.css({left: tipx, top: tipy})
},
showtip:function($tooltip, e){
if (this.fadeeffect[0])
$tooltip.hide().fadeIn(this.fadeeffect[1])
else
$tooltip.show()
},
hidetip:function($tooltip, e){
if (this.fadeeffect[0])
$tooltip.fadeOut(this.fadeeffect[1])
else
$tooltip.hide()
}
}
jQuery(document).ready(function(){
ajaxtooltip.iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
var tooltips=[] //array to contain references to all tooltip DIVs on the page
$('*[@title^="ajax:"]').each(function(index){ //find all links with "title=ajax:" declaration
this.titleurl=jQuery.trim(this.getAttribute('title').split(':')[1]) //get URL of external file
this.titleposition=index+' pos' //remember this tooltip DIV's position relative to its peers
tooltips.push($('<div class="ajaxtooltip"></div>').appendTo('body'))
var $target=$(this)
$target.removeAttr('title')
$target.hover(
function(e){ //onMouseover element
var $tooltip=tooltips[parseInt(this.titleposition)]
if (!$tooltip.get(0).loadsuccess){ //first time fetching Ajax content for this tooltip?
$tooltip.html(ajaxtooltip.loadingHTML).show()
$tooltip.load(this.titleurl, '', function(){
ajaxtooltip.positiontip($tooltip, e)
ajaxtooltip.showtip($tooltip, e)
$tooltip.get(0).loadsuccess=true
})
}
else{
ajaxtooltip.positiontip($tooltip, e)
ajaxtooltip.showtip($tooltip, e)
}
},
function(e){ //onMouseout element
var $tooltip=tooltips[parseInt(this.titleposition)]
ajaxtooltip.hidetip($tooltip, e)
}
)
$target.bind("mousemove", function(e){
var $tooltip=tooltips[parseInt(this.titleposition)]
ajaxtooltip.positiontip($tooltip, e)
})
})
})
Before you post, read our: 
