/** * eGroupware2 UI - Tooltip JS * * This javascript file contains the JavaScript code for the etemplate2 tooltip * * @link http://www.egroupware.org * @author Andreas Stoeckel (as@stylite.de) * @version $Id: tooltip.js 31497 2010-07-22 09:50:11Z igel457 $ */ /* Tooltip handling */ function egw_tooltip() { this.tooltip_div = null; this.current_elem = null; this.time_delta = 100; this.show_delta = 0; this.show_delay = 800; this.x = 0; this.y = 0; } egw_tooltip.prototype.bindToElement = function(_elem, _text) { if (_text != '') { var self = this; _elem.bind('mouseenter.tooltip', function(e) { if (_elem != self.current_elem) { //Prepare the tooltip self._prepare(_text); self.current_elem = _elem; self.show_delta = 0; self.x = e.clientX; self.y = e.clientY; window.setTimeout(function() {self.showHintTimeout();}, self.time_delta); } return false; }); _elem.bind('mouseleave.tooltip', function() { self.current_elem = null; self.show_delta = 0; //self.hide(); if (self.tooltip_div) { self.tooltip_div.fadeOut(100); } }); _elem.bind('mousemove.tooltip', function(e) { //Calculate the distance the mouse took since the last call of mousemove var dx = self.x - e.clientX; var dy = self.y - e.clientY; var movedist = Math.sqrt(dx * dx + dy * dy); //Block appereance of the tooltip on fast movements (with small movedistances) if (movedist > 2) self.show_delta = 0; self.x = e.clientX; self.y = e.clientY; }); } } egw_tooltip.prototype.unbindFromElement = function(_elem) { if (this.current_elem == _elem) { this.hide(); this.current_elem = null; } _elem.unbind('mouseenter.tooltip'); _elem.unbind('mouseleave.tooltip'); _elem.unbind('mousemove.tooltip'); } egw_tooltip.prototype.showHintTimeout = function() { if (this.current_elem != null) { this.show_delta += this.time_delta; if (this.show_delta < this.show_delay) { //Repeat the call of timeout var self = this; window.setTimeout(function() {self.showHintTimeout();}, this.time_delta); } else { this.show_delta = 0; this.show(); } } } egw_tooltip.prototype._prepare = function(_text) { var self = this; //Remove the old tooltip if (this.tooltip_div) this.hide(); //Generate the tooltip div, set it's text and append it to the body tag this.tooltip_div = $j(document.createElement('div')); this.tooltip_div.hide(); this.tooltip_div.append(_text); this.tooltip_div.addClass("egw_tooltip"); $j('body').append(this.tooltip_div); //The tooltip should automatically hide when the mouse comes over it this.tooltip_div.mouseenter(function() { self.hide(); }); } egw_tooltip.prototype.show = function() { if (this.tooltip_div) { //Calculate the cursor_rectangle - this is a space the tooltip might //not overlap with var cursor_rect = { left: (this.x - 8), top: (this.y - 8), right: (this.x + 8), bottom: (this.y + 8) }; //Calculate how much space is left on each side of the rectangle var window_width = $j(document).width(); var window_height = $j(document).height(); var space_left = { left: (cursor_rect.left), top: (cursor_rect.top), right: (window_width - cursor_rect.right), bottom: (window_height - cursor_rect.bottom) }; //Get the width and the height of the tooltip var tooltip_width = this.tooltip_div.width(); if (tooltip_width > 300) tooltip_width = 300; var tooltip_height = this.tooltip_div.height(); if (space_left.right < tooltip_width) { this.tooltip_div.css('left', cursor_rect.left - tooltip_width); } else if (space_left.left >= tooltip_width) { this.tooltip_div.css('left', cursor_rect.right); } else { this.tooltip_div.css('left', cursor_rect.right); this.tooltip_div.css('max-width', space_left.right); } if (space_left.bottom < tooltip_height) { this.tooltip_div.css('top', cursor_rect.top - tooltip_height); } else if (space_left.top >= tooltip_height) { this.tooltip_div.css('top', cursor_rect.bottom); } else { this.tooltip_div.css('top', cursor_rect.bottom); this.tooltip_div.css('max-height', space_left.bottom); } this.tooltip_div.fadeIn(100); } } egw_tooltip.prototype.hide = function() { if (this.tooltip_div) { this.tooltip_div.remove(); this.tooltip_div = null; } } //A reference to the current tooltip object window.egw_global_tooltip = new egw_tooltip();