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