Main Page | Modules | Directories | File List | File Members

tooltips.js

Go to the documentation of this file.
00001 /*
00002 *
00003 * Copyright (c) 2004-2005 by Zapatec, Inc.
00004 * http://www.zapatec.com
00005 * 1700 MLK Way, Berkeley, California,
00006 * 94709, U.S.A.
00007 * All rights reserved.
00008 *
00009 * $Id: tooltips.js 2447 2006-04-11 21:47:07Z alex $
00010 *
00011 * Tooltips
00012 */
00013 
00025 Zapatec.Tooltip = function(target, tooltip) {
00026         var self = this;
00027         if (typeof target == "string")
00028                 target = document.getElementById(target);
00029         if (typeof tooltip == "string")
00030                 tooltip = document.getElementById(tooltip);
00031         this.visible = false;
00032         this.target = target;
00033         this.tooltip = tooltip;
00034         this.tooltip.style.position = 'absolute';
00035         this.tooltip.style.display = 'none';
00036         this.inTooltip = false;
00037         this.timeout = null;
00038         Zapatec.Utils.addClass(tooltip, "tooltip");
00039         document.body.appendChild(tooltip);
00040         if (tooltip.title) {
00041                 var title = Zapatec.Utils.createElement("div");
00042                 tooltip.insertBefore(title, tooltip.firstChild);
00043                 title.className = "title";
00044                 title.innerHTML = unescape(tooltip.title);
00045                 tooltip.title = ""; // ;-)
00046         }
00047         Zapatec.Utils.addEvent(target, "mouseover", function(ev) {
00048                 return self._onMouseMove(ev);
00049         });
00050         if (Zapatec.Tooltip.prefs.move) {
00051                 Zapatec.Utils.addEvent(target, "mousemove", function(ev) {
00052                         return self._onMouseMove(ev);
00053                 });
00054         }
00055         Zapatec.Utils.addEvent(target, "mouseout",  function(ev) {
00056                 return self._onMouseOut(ev);
00057         });
00058         Zapatec.Utils.addEvent(tooltip, "mouseover", function(ev) {
00059                 self.inTooltip = true;
00060         });
00061         Zapatec.Utils.addEvent(tooltip, "mouseout", function(ev) {
00062                 ev || (ev = window.event);
00063                 if (!Zapatec.Utils.isRelated(self.tooltip, ev)) {
00064                         self.inTooltip = false;
00065                         self.hide();
00066                 }
00067         });
00068         self.wch = Zapatec.Utils.createWCH();
00069 };
00070 
00094 Zapatec.Tooltip.setupFromDFN = function(class_re) {
00095         // init tooltips
00096         var dfns = document.getElementsByTagName("dfn");
00097         if (typeof class_re == "string")
00098                 class_re = new RegExp("(^|\\s)" + class_re + "(\\s|$)", "i");
00099         for (var i = 0; i < dfns.length; ++i) {
00100                 var dfn = dfns[i];
00101                 if (!class_re || class_re.test(dfn.className)) {
00102                         var div = document.createElement("div");
00103                         if (dfn.title) {
00104                                 div.title = dfn.title;
00105                                 dfn.title = "";
00106                         }
00107                         while (dfn.firstChild)
00108                                 div.appendChild(dfn.firstChild);
00109                         dfn.innerHTML = "?";
00110                         dfn.className = "helpIcon";
00111                         new Zapatec.Tooltip(dfn, div);
00112                 }
00113         } // nice isn't it? :D
00114 };
00115 
00117 Zapatec.Tooltip.prefs = {
00118         move : false            
00119 };
00120 Zapatec.Tooltip._C = null;      
00129 Zapatec.Tooltip.prototype._onMouseMove = function(ev) {
00130         ev || (ev = window.event);
00131         if (this.timeout) {
00132                 clearTimeout(this.timeout);
00133                 this.timeout = null;
00134         }
00135         if (!this.visible && !Zapatec.Utils.isRelated(this.target, ev)) {
00136                 var
00137                         x = ev.clientX + 2,
00138                         y = ev.clientY + 4;
00139                 this.show(x, y);
00140         }
00141 };
00142 
00151 Zapatec.Tooltip.prototype._onMouseOut = function(ev) {
00152         ev || (ev = window.event);
00153         var self = this;
00154         if (!Zapatec.Utils.isRelated(this.target, ev)) {
00155                 if (this.timeout) {
00156                         clearTimeout(this.timeout);
00157                         this.timeout = null;
00158                 }
00159                 this.timeout = setTimeout(function() {
00160                         self.hide();
00161                 }, 150);
00162         }
00163 };
00164 
00171 Zapatec.Tooltip.prototype.show = function(x, y) {
00172         if (Zapatec.Tooltip._C) {
00173                 if (Zapatec.Tooltip._C.timeout) {
00174                         clearTimeout(Zapatec.Tooltip._C.timeout);
00175                         Zapatec.Tooltip._C.timeout = null;
00176                 }
00177                 Zapatec.Tooltip._C.hide();
00178         }
00179         var t = this.tooltip;
00180         t.style.left = t.style.top = "0px";
00181         t.style.display = "block";
00182         var box = { x: x, y: y, width: t.offsetWidth, height: t.offsetHeight };
00183         Zapatec.Utils.fixBoxPosition(box);
00184         t.style.left = box.x + "px";
00185         t.style.top = box.y + "px";
00186         Zapatec.Utils.setupWCH_el(this.wch, t);
00187         Zapatec.Utils.addClass(this.target, "tooltip-hover");
00188         this.visible = true;
00189         Zapatec.Tooltip._C = this;
00190 };
00191 
00195 Zapatec.Tooltip.prototype.hide = function() {
00196         if (!this.inTooltip) {
00197                 this.tooltip.style.display = "none";
00198                 Zapatec.Utils.hideWCH(this.wch);
00199                 Zapatec.Utils.removeClass(this.target, "tooltip-hover");
00200                 this.visible = false;
00201         }
00202 };