[Summary view] [Print] [Text view]

   1  /*
   2  javascript for Bubble Tooltips by Alessandro Fulciniti
   3  - http://pro.html.it - http://web-graphics.com 
   4  obtained from: http://web-graphics.com/mtarchive/001717.php
   5  
   6  phpBB Development Team:
   7      - modified to adhere to our coding guidelines
   8      - integration into our design
   9      - added ability to perform tooltips on select elements
  10      - further adjustements
  11  */
  12  
  13  var head_text, tooltip_mode;
  14  
  15  /**
  16  * Enable tooltip replacements for links
  17  */
  18  function enable_tooltips_link(id, headline, sub_id)
  19  {
  20      var links, i, hold;
  21      
  22      head_text = headline;
  23  
  24      if (!document.getElementById || !document.getElementsByTagName)
  25      {
  26          return;
  27      }
  28  
  29      hold = document.createElement('span');
  30      hold.id = '_tooltip_container';
  31      hold.setAttribute('id', '_tooltip_container');
  32      hold.style.position = 'absolute';
  33  
  34      document.getElementsByTagName('body')[0].appendChild(hold);
  35  
  36      if (id == null)
  37      {
  38          links = document.getElementsByTagName('a');
  39      }
  40      else
  41      {
  42          links = document.getElementById(id).getElementsByTagName('a');
  43      }
  44  
  45      for (i = 0; i < links.length; i++)
  46      {
  47          if (sub_id)
  48          {
  49              if (links[i].id.substr(0, sub_id.length) == sub_id)
  50              {
  51                  prepare(links[i]);
  52              }
  53          }
  54          else
  55          {
  56              prepare(links[i]);
  57          }
  58      }
  59  
  60      tooltip_mode = 'link';
  61  }
  62  
  63  /**
  64  * Enable tooltip replacements for selects
  65  */
  66  function enable_tooltips_select(id, headline, sub_id)
  67  {
  68      var links, i, hold;
  69      
  70      head_text = headline;
  71  
  72      if (!document.getElementById || !document.getElementsByTagName)
  73      {
  74          return;
  75      }
  76  
  77      hold = document.createElement('span');
  78      hold.id = '_tooltip_container';
  79      hold.setAttribute('id', '_tooltip_container');
  80      hold.style.position = 'absolute';
  81  
  82      document.getElementsByTagName('body')[0].appendChild(hold);
  83  
  84      if (id == null)
  85      {
  86          links = document.getElementsByTagName('option');
  87      }
  88      else
  89      {
  90          links = document.getElementById(id).getElementsByTagName('option');
  91      }
  92  
  93      for (i = 0; i < links.length; i++)
  94      {
  95          if (sub_id)
  96          {
  97              if (links[i].parentNode.id.substr(0, sub_id.length) == sub_id)
  98              {
  99                  prepare(links[i]);
 100              }
 101          }
 102          else
 103          {
 104              prepare(links[i]);
 105          }
 106      }
 107  
 108      tooltip_mode = 'select';
 109  }
 110  
 111  /**
 112  * Prepare elements to replace
 113  */
 114  function prepare(element)
 115  {
 116      var tooltip, text, desc, title;
 117  
 118      text = element.getAttribute('title');
 119  
 120      if (text == null || text.length == 0)
 121      {
 122          return;
 123      }
 124  
 125      element.removeAttribute('title');
 126      tooltip = create_element('span', 'tooltip');
 127  
 128      title = create_element('span', 'top');
 129      title.appendChild(document.createTextNode(head_text));
 130      tooltip.appendChild(title);
 131  
 132      desc = create_element('span', 'bottom');
 133      desc.innerHTML = text;
 134      tooltip.appendChild(desc);
 135  
 136      set_opacity(tooltip);
 137  
 138      element.tooltip = tooltip;
 139      element.onmouseover = show_tooltip;
 140      element.onmouseout = hide_tooltip;
 141  
 142      if (tooltip_mode == 'link')
 143      {
 144          element.onmousemove = locate;
 145      }
 146  }
 147  
 148  /**
 149  * Show tooltip
 150  */
 151  function show_tooltip(e)
 152  {
 153      document.getElementById('_tooltip_container').appendChild(this.tooltip);
 154      locate(this);
 155  }
 156  
 157  /**
 158  * Hide tooltip
 159  */
 160  function hide_tooltip(e)
 161  {
 162      var d = document.getElementById('_tooltip_container');
 163      if (d.childNodes.length > 0)
 164      {
 165          d.removeChild(d.firstChild);
 166      }
 167  }
 168  
 169  /**
 170  * Set opacity on tooltip element
 171  */
 172  function set_opacity(element)
 173  {
 174      element.style.filter = 'alpha(opacity:95)';
 175      element.style.KHTMLOpacity = '0.95';
 176      element.style.MozOpacity = '0.95';
 177      element.style.opacity = '0.95';
 178  }
 179  
 180  /**
 181  * Create new element
 182  */
 183  function create_element(tag, c)
 184  {
 185      var x = document.createElement(tag);
 186      x.className = c;
 187      x.style.display = 'block';
 188      return x;
 189  }
 190  
 191  /**
 192  * Correct positioning of tooltip container
 193  */
 194  function locate(e)
 195  {
 196      var posx = 0;
 197      var posy = 0;
 198  
 199      e = e.parentNode;
 200  
 201      if (e.offsetParent)
 202      {
 203          for (var posx = 0, posy = 0; e.offsetParent; e = e.offsetParent)
 204          {
 205              posx += e.offsetLeft;
 206              posy += e.offsetTop;
 207          }
 208      }
 209      else
 210      {
 211          posx = e.offsetLeft;
 212          posy = e.offsetTop;
 213      }
 214  
 215      if (tooltip_mode == 'link')
 216      {
 217          document.getElementById('_tooltip_container').style.top=(posy+20) + 'px';
 218          document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
 219      }
 220      else
 221      {
 222          document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
 223          document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
 224      }
 225  
 226  /*
 227      if (e == null)
 228      {
 229          e = window.event;
 230      }
 231  
 232      if (e.pageX || e.pageY)
 233      {
 234          posx = e.pageX;
 235          posy = e.pageY;
 236      }
 237      else if (e.clientX || e.clientY)
 238      {
 239          if (document.documentElement.scrollTop)
 240          {
 241              posx = e.clientX+document.documentElement.scrollLeft;
 242              posy = e.clientY+document.documentElement.scrollTop;
 243          }
 244          else
 245          {
 246              posx = e.clientX+document.body.scrollLeft;
 247              posy = e.clientY+document.body.scrollTop;
 248          }
 249      }
 250  */
 251  }