Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Ajax Tooltip script v1.2 Help

    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)
    		})
    	})
    })

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,206
    Thanks
    23
    Thanked 605 Times in 604 Posts
    Don't use onMouseout. In the onMouseover close all open tooltips and open the one that is needed.

    To click outside the tooltip you need to write another function that uses the code in the onMouseout function.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •