js/my_tooltip.js

   1 /*
   2  My tooltip lib
   3 */
   4 var config = new Object();
   5
   6 config. width       =   0   // Tooltip width, 0 for auto
   7 config. OffsetX     =  40   // Horizontal offset of left-top corner from mousepointer
   8 config. OffsetY     = -30   // Vertical offset
   9 config. Sticky      = true  // Move or not while shown
  10 config. Border      = true  // Show border
  11 config. step        = 15    // Opacity step time
  12 config. timeUp      = 0     // Show opacity time
  13 config. timeDown    = 300   // Hide opacity time
  14 tt_aV = new Array();        // Caches and enumerates config data for currently active tooltip
  15
  16 // Mouse data
  17 var tt_musX = 0, tt_musY = 0;
  18
  19 // tip data
  20 var tt_opaTimer = new Number(0),
  21 tt_mainDiv = 0,     // Main div
  22 tt_subDiv = 0,      // Main sub div - for opacity
  23 tt_status  = 0,     // Status & 1 - tip shown/hide
  24 tt_element = 0,     // onmouseover element for hide tooltip
  25 tt_opacity = 0,     // Current sub div opacity
  26 tt_isIE = 0,
  27 tt_currentTip = -1,
  28 tt_loading_text = '<div class=loading> </div>';
  29
  30 function ajaxTip()
  31 {
  32         tt_currentTip = arguments[0];
  33         arguments[0] = tt_loading_text;
  34         var id = tt_currentTip;
  35         tt_Tip(arguments);
  36         my_AJAX.GETupload("ajax.php?tip=" + id, function(text){tt_updateTipData(id, text);});
  37 }
  38 function tt_hrefTip()
  39 {
  40         if (!this.id)
  41                 return;
  42         if (this.firstChild.tagName=='IMG')
  43                 ajaxTip(this.id);
  44         else
  45                 ajaxTip(this.id, STICKY, false);
  46 }
  47
  48 function Tip()
  49 {
  50         tt_currentTip = -1;
  51         tt_Tip(arguments);
  52 }
  53 function tt_Tip(arg)
  54 {
  55         tt_ReadCmds(arg);
  56         tt_UpdateTip(arg[0]);
  57         tt_updatePosition();
  58         tt_startShowTip();
  59 }
  60 function tt_updateTipData(id, text)
  61 {
  62         if (tt_currentTip != id)
  63                 return;
  64         if ((tt_status & 1) == 0)
  65                 return;
  66         tt_UpdateTip(text);
  67         setOpacity(tt_subDiv, tt_opacity);
  68         tt_updatePosition();
  69 }
  70 function tt_opaStepUp(step)
  71 {
  72         tt_opacity+=(100*step/tt_aV[TIMEUP]);
  73         if (tt_opacity < 100)
  74                 tt_opaTimer.Timer("tt_opaStepUp(" + step + ")", step, true);
  75         else
  76                 {tt_opaTimer.EndTimer();tt_opacity = 100;}
  77         setOpacity(tt_subDiv, tt_opacity);
  78 }
  79 function tt_opaStepDown(step)
  80 {
  81         tt_opacity-=(100*step/tt_aV[TIMEDOWN]);
  82         if (tt_opacity > 0)
  83                 tt_opaTimer.Timer("tt_opaStepDown(" + step + ")", step, true);
  84         else
  85                 {tt_opaTimer.EndTimer();tt_finishHideTip();}
  86         setOpacity(tt_subDiv, tt_opacity);
  87 }
  88 function tt_startShowTip()
  89 {
  90         tt_opaTimer.EndTimer();
  91         if (tt_element)
  92         {
  93                 removeEvent(tt_element, "mouseout", tt_Hide);
  94                 tt_element = 0;
  95         }
  96
  97         tt_status|=1;
  98         tt_mainDiv.style.visibility = "visible";
  99         if (tt_aV[TIMEUP])
 100         {
 101                 tt_opacity = 0;
 102                 tt_opaStepUp(tt_aV[STEP]);
 103         }
 104         else
 105         {
 106                 tt_opacity = 100;
 107                 setOpacity(tt_subDiv, tt_opacity);
 108         }
 109 }
 110 function tt_startHideTip()
 111 {
 112         tt_opaTimer.EndTimer();
 113         tt_status&=~1;
 114         if (tt_aV[TIMEDOWN])
 115                 tt_opaStepDown(tt_aV[STEP]);
 116         else
 117                 tt_finishHideTip();
 118 }
 119 function tt_finishHideTip()
 120 {
 121         tt_mainDiv.style.visibility = "hidden";
 122         tt_opacity = 0;
 123 }
 124 function tt_updatePosition()
 125 {
 126         var p = getPageRect(),
 127         width = tt_subDiv.offsetWidth,
 128         height= tt_subDiv.offsetHeight,
 129         max_x = p.left + p.width - width,
 130         max_y = p.top + p.height - height,
 131         x = tt_musX + tt_aV[OFFSETX],
 132         y = tt_musY + tt_aV[OFFSETY];
 133         if (x >= max_x) x = max_x;
 134         if (y >= max_y) y = max_y;
 135
 136         var inX_ByX = (tt_musX > x && tt_musX < x + width);
 137         var inY_ByY = (tt_musY > y && tt_musY < y + height);
 138         if (inX_ByX && inY_ByY)
 139         {
 140                 x = tt_musX - width - tt_aV[OFFSETX];
 141                 x = x<p.left?p.left:x;
 142                 inX_ByX = (tt_musX > x && tt_musX < x + width);
 143                 if (inX_ByX) y = tt_musY - height - tt_aV[OFFSETY];
 144     }
 145         var css = tt_mainDiv.style;
 146         css.left = (x<p.left?p.left:x) + 'px';
 147         css.top  = (y<p.top?p.top:y) + 'px';
 148 }
 149
 150 function tt_UpdateTip(text)
 151 {
 152         if (tt_aV[BORDER])
 153         {
 154                 var tt_tipBody = $('tt_tip_body');
 155                 if (tt_tipBody)
 156                 {
 157                         tt_tipBody.innerHTML = text;
 158                         return;
 159                 }
 160                 tt_mainDiv.innerHTML = ''
 161                 + '<div id=tt_tooltip>'
 162                 + '<table class=tooltip cellSpacing=0 cellPadding=0><tbody>'
 163                 + '<tr><td class=tiptopl></td><td class=tiptop></td><td class=tiptopr></td></tr>'
 164                 + '<tr><td class=tipl>&nbsp;</td><td class=tipbody id=tt_tip_body>'
 165                 + text
 166                 + '</td><td class=tipr>&nbsp;</td></tr>'
 167                 + '<tr><td class=tipbottoml></td><td class=tipbottom></td><td class=tipbottomr></td></tr>'
 168                 + '</tbody></table></div>';
 169         }
 170         else
 171                 tt_mainDiv.innerHTML = ''
 172                 + '<div id=tt_tooltip>'
 173                 + text
 174                 + '</div>';
 175         tt_subDiv = $('tt_tooltip');
 176         tt_subDiv.style.width = tt_aV[WIDTH] ? tt_aV[WIDTH] + 'px' : 'auto';
 177 }
 178
 179 function tt_Hide(e)
 180 {
 181         e = window.event || e;
 182         if (!e) return;
 183         var target = e.target || e.srcElement;
 184         if (tt_element == target) {
 185                 removeEvent(tt_element, "mouseout", tt_Hide);
 186                 tt_element = 0;
 187                 tt_startHideTip();
 188         }
 189 }
 190
 191 function tt_Move(e)
 192 {
 193         e = window.event || e;
 194         if (!e) return;
 195         var b = document.body || document.documentElement;
 196         tt_musX = e.pageX || (e.clientX + b.scrollLeft);
 197         tt_musY = e.pageY || (e.clientY + b.scrollTop);
 198         if (tt_element == 0 && tt_status & 1)
 199         {
 200                 tt_element = e.target || e.srcElement;
 201                 addEvent(tt_element, "mouseout", tt_Hide);
 202         }
 203         if (!tt_aV[STICKY] && tt_status&1)
 204            tt_updatePosition();
 205 }
 206 function Init()
 207 {
 208         // Create the tooltip DIV
 209         tt_mainDiv = insertElement(getBody(), 'DIV','tt_mytooltip');
 210         tt_mainDiv.style.position = "absolute";
 211         tt_mainDiv.style.zIndex   = 1000;
 212         tt_MkCmdEnum();
 213         addEvent(document, "mousemove", tt_Move);
 214         tt_finishHideTip();
 215 }
 216
 217 // Creates command names by translating config variable names to upper case
 218 function tt_MkCmdEnum()
 219 {
 220         var n = 0;
 221         for(var i in config)
 222                 eval("window." + i.toString().toUpperCase() + " = " + n++);
 223 }
 224 function tt_ReadCmds(a)
 225 {
 226         var i=0;
 227         // First load the global config values, to initialize also values
 228         // for which no command has been passed
 229         for(var j in config)
 230                 tt_aV[i++] = config[j];
 231         // Then replace each cached config value for which a command has been
 232         // passed (ensure the # of command args plus value args be even)
 233         if(a.length & 1)
 234         {
 235                 for(i = a.length - 1; i > 0; i -= 2)
 236                         tt_aV[a[i - 1]] = a[i];
 237                 return true;
 238         }
 239         tt_Err("Incorrect call of Tip() or ajaxTip().\n"
 240                         + "Each command must be followed by a value.");
 241         return false;
 242 }
 243 Init();