[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      var links, i, hold;
  20  
  21      head_text = headline;
  22  
  23      if (!document.getElementById || !document.getElementsByTagName) {
  24          return;
  25      }
  26  
  27      hold = document.createElement('span');
  28      hold.id = '_tooltip_container';
  29      hold.setAttribute('id', '_tooltip_container');
  30      hold.style.position = 'absolute';
  31  
  32      document.getElementsByTagName('body')[0].appendChild(hold);
  33  
  34      if (id === null) {
  35          links = document.getElementsByTagName('a');
  36      } else {
  37          links = document.getElementById(id).getElementsByTagName('a');
  38      }
  39  
  40      for (i = 0; i < links.length; i++) {
  41          if (sub_id) {
  42              if (links[i].id.substr(0, sub_id.length) === sub_id) {
  43                  prepare(links[i]);
  44              }
  45          } else {
  46              prepare(links[i]);
  47          }
  48      }
  49  
  50      tooltip_mode = 'link';
  51  }
  52  
  53  /**
  54  * Enable tooltip replacements for selects
  55  */
  56  function enable_tooltips_select(id, headline, sub_id) {
  57      var links, i, hold;
  58  
  59      head_text = headline;
  60  
  61      if (!document.getElementById || !document.getElementsByTagName) {
  62          return;
  63      }
  64  
  65      hold = document.createElement('span');
  66      hold.id = '_tooltip_container';
  67      hold.setAttribute('id', '_tooltip_container');
  68      hold.style.position = 'absolute';
  69  
  70      document.getElementsByTagName('body')[0].appendChild(hold);
  71  
  72      if (id === null) {
  73          links = document.getElementsByTagName('option');
  74      } else {
  75          links = document.getElementById(id).getElementsByTagName('option');
  76      }
  77  
  78      for (i = 0; i < links.length; i++) {
  79          if (sub_id) {
  80              if (links[i].parentNode.id.substr(0, sub_id.length) === sub_id) {
  81                  prepare(links[i]);
  82              }
  83          } else {
  84              prepare(links[i]);
  85          }
  86      }
  87  
  88      tooltip_mode = 'select';
  89  }
  90  
  91  /**
  92  * Prepare elements to replace
  93  */
  94  function prepare(element) {
  95      var tooltip, text, desc, title;
  96  
  97      text = element.getAttribute('title');
  98  
  99      if (text === null || text.length === 0) {
 100          return;
 101      }
 102  
 103      element.removeAttribute('title');
 104      tooltip = create_element('span', 'tooltip');
 105  
 106      title = create_element('span', 'top');
 107      title.appendChild(document.createTextNode(head_text));
 108      tooltip.appendChild(title);
 109  
 110      desc = create_element('span', 'bottom');
 111      desc.innerHTML = text;
 112      tooltip.appendChild(desc);
 113  
 114      set_opacity(tooltip);
 115  
 116      element.tooltip = tooltip;
 117      element.onmouseover = show_tooltip;
 118      element.onmouseout = hide_tooltip;
 119  
 120      if (tooltip_mode === 'link') {
 121          element.onmousemove = locate;
 122      }
 123  }
 124  
 125  /**
 126  * Show tooltip
 127  */
 128  function show_tooltip(e) {
 129      document.getElementById('_tooltip_container').appendChild(this.tooltip);
 130      locate(this);
 131  }
 132  
 133  /**
 134  * Hide tooltip
 135  */
 136  function hide_tooltip(e) {
 137      var d = document.getElementById('_tooltip_container');
 138      if (d.childNodes.length > 0) {
 139          d.removeChild(d.firstChild);
 140      }
 141  }
 142  
 143  /**
 144  * Set opacity on tooltip element
 145  */
 146  function set_opacity(element) {
 147      element.style.filter = 'alpha(opacity:95)';
 148      element.style.KHTMLOpacity = '0.95';
 149      element.style.MozOpacity = '0.95';
 150      element.style.opacity = '0.95';
 151  }
 152  
 153  /**
 154  * Create new element
 155  */
 156  function create_element(tag, c) {
 157      var x = document.createElement(tag);
 158      x.className = c;
 159      x.style.display = 'block';
 160      return x;
 161  }
 162  
 163  /**
 164  * Correct positioning of tooltip container
 165  */
 166  function locate(e) {
 167      var posx = 0;
 168      var posy = 0;
 169  
 170      e = e.parentNode;
 171  
 172      if (e.offsetParent) {
 173          for (posx = 0, posy = 0; e.offsetParent; e = e.offsetParent) {
 174              posx += e.offsetLeft;
 175              posy += e.offsetTop;
 176          }
 177      } else {
 178          posx = e.offsetLeft;
 179          posy = e.offsetTop;
 180      }
 181  
 182      if (tooltip_mode === 'link') {
 183          document.getElementById('_tooltip_container').style.top=(posy+20) + 'px';
 184          document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
 185      } else {
 186          document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
 187          document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
 188      }
 189  
 190  /*
 191      if (e == null)
 192      {
 193          e = window.event;
 194      }
 195  
 196      if (e.pageX || e.pageY)
 197      {
 198          posx = e.pageX;
 199          posy = e.pageY;
 200      }
 201      else if (e.clientX || e.clientY)
 202      {
 203          if (document.documentElement.scrollTop)
 204          {
 205              posx = e.clientX+document.documentElement.scrollLeft;
 206              posy = e.clientY+document.documentElement.scrollTop;
 207          }
 208          else
 209          {
 210              posx = e.clientX+document.body.scrollLeft;
 211              posy = e.clientY+document.body.scrollTop;
 212          }
 213      }
 214  */
 215  }