Quelltext der Seite MediaWiki:Glossar2.js

// s.a. vorlage:glossar

newRules[2].style.display = 'none'; //Glossar

var gl = [], gl_a = [], off;

function set_Glossar() {

// Links bearbeiten
  var links = document.getElementsByTagName('A');

  for (var i=0;i<links .length;i++) {
    if (links[i].parentNode.className=='g_links' || links[i].parentNode.parentNode.className=='g_links') {
      gl_a[gl_a.length] = links[i];
    }
  }
  for (var i in gl_a) {
    gl_a[i].innerHTML = gl_a[i].innerHTML.replace(/oe/, 'ö').replace(/Oe/, 'Ö').replace(/([^aeu])ue/, '$1ü').replace(/Ue/, 'Ü');  
    gl_a[i].innerHTML = gl_a[i].innerHTML.replace(/ae/, 'ä').replace(/Ae/, 'ä').replace(/.+\//, '');  
  }

// Arrays füllen
  var spans = document.getElementsByTagName('SPAN');
  for (var i=0;i<spans.length;i++) {
    if (spans[i].className=='glossar') {
      gl[gl.length] = spans[i];
    }
  }
  for (var i in gl) {
    gl[i].onclick = show_Tooltip;
    gl[i].onmouseout = gloss_OFF;
    gl[i].onmouseover = clear_OFF;
// Suchen und Finden
    var parentG = gl[i].parentNode.tagName == "LI" ? 
      gl[i].parentNode.parentNode : gl[i].parentNode;
    var anker=parentG.insertBefore(document.createElement("A"),
      parentG.firstChild);
    anker.name=gl[i].id||'';
    gl[i].id= '';
    anker.id=anker.name;
    if (String(location.href).indexOf('#')!=-1) 
    var suchtext = String(location.href).substring(String(location.href).indexOf('#')).replace(/#/,'');     
    if (suchtext==anker.name&& suchtext.length>1) {
      location.href=location.href;
      gl[i].style.backgroundColor = "#fffccc";
    } 
  }
}

function hide_Tooltip() { 
  for (var i in gl) gl[i].id = ''; 
}

function show_Tooltip() { 
// g_body ansprechen
  var gBody=this.getElementsByTagName('SMALL')[0];
//Glossarweite berechnen
  var em=this.parentNode.appendChild(document.createElement('div'));
  em.style.width=12+"em";
  var gBodyOffsetWidth = em.offsetWidth;
  var MinL= em.offsetLeft-10;
  this.parentNode.removeChild(em);

//Positionierung 
  var gBodyLeft = (this.offsetWidth - gBodyOffsetWidth)/2;
  var gBodyOffsetLeft = this.offsetLeft + gBodyLeft ;
  var gBodyRight = gBodyOffsetLeft + gBodyOffsetWidth;
  var MaxR = MinL+10+this.parentNode.offsetWidth+10;
  if (gBodyOffsetLeft < MinL && this.parentNode.tagName == "P")
    gBodyLeft = gBodyLeft + (MinL - gBodyOffsetLeft);
  if (gBodyRight > MaxR  && this.parentNode.offsetWidth > gBodyOffsetWidth && this.parentNode.tagName == "P") 
    gBodyLeft = gBodyLeft + (MaxR-gBodyRight);
  gBody.style.left = gBodyLeft +"px";
// anknipsen, ausknipsen
  if (this.id == 'show_Tooltip') hide_Tooltip();
  else {hide_Tooltip(); this.id = 'show_Tooltip';}
}
function gloss_OFF()  { off= window.setTimeout('hide_Tooltip()', 500); }
function clear_OFF()  { if (off!='undefined') window.clearTimeout(off); }

// Script starten
set_Glossar();

$('.testlossar').each(function(){
  var child = $(this).find('small')[0]
    , parent = $(this).closest('p, li') ; 
  $( parent).css("position", "relative");  

  var right = ($(parent).width() - 10 - $(this).width() - $(this).position().left) * -1
    , diff = ($(this).width() - $(child).width()) / 2
    , left = ($(this).position().left + 10) * -1;

   if (diff < left) {
     $( child).css("left", left + 'px');
   console.log('diff= '+ diff + ', this left= ' + left);
   }
    if (diff < right) {
     $( child).css("right", right + 'px');
   }
       
   $( child ).show();  
   
   console.log('diff= '+ diff + ', this left= ' + left + ', this right= ' + right);
});