Outils pour utilisateurs

Outils du site


tips_informatiques:programmation:javascript:jquery

hover() pour un tooltip

var tt_container = '<div id="tt_container"><div id="tt_content"></div></div>';
var tt_content = "";
var tt_hovered_id = "";
var tt_visible_tooltip_id = "";
var tt_contents = new Array();
var tt_timer_show = null;
var tt_timer_hide = null;
 
var tt_show_delay = 100; 
var tt_show_time  = 400; 
var tt_hide_delay = 250;
var tt_hide_time  = 500;
 
$(document).ready(function(){
 
	register_tool_tip("#hover1", "tooltips/tooltip_1.php");
	register_tool_tip("#hover2", "tooltips/tooltip_2.php");
	register_tool_tip("#hover3", "tooltips/tooltip_2.php");
});
 
 
function register_tool_tip(element_id, content_url)
{
	/*
	* Note do not user JQuery hover() function as it doesn't with FX when you enter/leave from/to a textarea 
	*/
	$(element_id).bind("mouseover",
	function(){
 
		tt_hovered_id = element_id;
		show_tooltip(element_id, content_url);
 
	});
 
	$(element_id).bind("mouseout",
	function(){
 
		tt_hovered_id = "";
		hide_tooltip(element_id);
 
	});
}
 
function show_tooltip(element_id, content_url)
{
	if(typeof(tt_timer_show) == "object" || tt_timer_show > 0)
	{
		clearTimeout(tt_timer_show);
	}
 
	tt_timer_show = setTimeout(function(){
 
		if(tt_hovered_id.length > 0)
		{
        	var refresh = false;
 
        	if($("#tt_container").length == 0)
        	{
        		$("body").append(tt_container);
        		refresh = true;
        	}
 
        	if(tt_visible_tooltip_id.length == 0 || (tt_visible_tooltip_id.length > 0 && tt_visible_tooltip_id != element_id))
        	{
        		/*
        		* if we hover another element than the currently displayed tooltip, we set
        		* it display to none to allow viewing fade in
        		*/
        		$("#tt_container").css("display", "none");
        		refresh = true;
        	}
 
        	tt_visible_tooltip_id = element_id;
 
        	if(refresh)
        	{
        		var pos = $(element_id).offset();
 
        		var left = Math.round(pos.left) + 10;
        		var top = Math.round(pos.top) + 10;
 
        		$("#tt_container").css("left", left + "px");
        		$("#tt_container").css("top", top + "px");
 
        		tt_content = '<p><img src="img/waiting24.gif" /></p>';
        		$("#tt_content").html(tt_content);
 
        		$("#tt_container").fadeIn(tt_show_time);
 
        		if(tt_contents[element_id])
        		{
        			$("#tt_content").html(tt_contents[element_id]);
        		}
        		else
        		{
                	$.ajax({  
                		type: 'GET',  
                        url: content_url,  
                        success: function(data){  
 
                				$("#tt_content").html(data);
                				tt_contents[element_id] = data;
                           	},
                        error: function(request, textStatus, error){
 
                        	   $("#tt_content").html(error);
 
                	       	}
                       });
        		}
            	register_tt_container_events(element_id);
        	}
		}
	}, tt_show_delay);
}
 
function register_tt_container_events(element_id)
{
	/*
	* Note do not user JQuery hover() function as it doesn't with FX when you enter/leave from/to a textarea 
	*/
	$("#tt_container").bind("mouseover",
			function(){
 
				tt_hovered_id = element_id;
 
			});
	$("#tt_container").bind("mouseout",
			function(){
 
				tt_hovered_id = "";
				hide_tooltip(element_id)
 
			});
}
 
function hide_tooltip(element_id)
{
	if(typeof(tt_timer_hide) == "object" || tt_timer_hide > 0)
	{
		clearTimeout(tt_timer_hide);
	}
 
	if(tt_visible_tooltip_id.length == 0 || tt_visible_tooltip_id == element_id)
	{	
		tt_timer_hide = setTimeout(function(){
 
			if(tt_hovered_id == "")
			{
    			$("#tt_container").fadeOut(tt_hide_time);
    			tt_visible_tooltip_id = "";
			}
 
		}, tt_hide_delay);
	}
	else if(tt_visible_tooltip_id != element_id)
	{
		tt_timer_hide = setTimeout(function(){
 
			if(tt_visible_tooltip_id != "" && tt_visible_tooltip_id != element_id)
			{
        		/*
        		* Another tooltip than the current displayed has to be shown
        		* => we hide the currently displayed one without fading it out
        		*/
        		$("#tt_container").remove();
        		tt_visible_tooltip_id = "";
			}
 
		}, tt_hide_delay);
	}
}
tips_informatiques/programmation/javascript/jquery.txt · Dernière modification: 2010/03/18 00:00 (modification externe)