DHTML Javascript zum freien Download

Das unobtrusive Tooltip Javascript — Einbauanleitung

Das title Element in HTML-Tags erlaubt die Angabe von Zusatzinformationen, welche — nach kurzer Verzögerung — in einer Tooltip Box erscheinen, wenn die Maus über das Objekt geführt wird. Das ist ein nützliches und bewährtes Standardverhalten des Browsers. Ausnahmsweise kann es aber vorkommen, dass ein sofort aufspringender, CSS-formatierter und beweglicher Text gewünscht wird.

Aktualisierung: Angeregt durch die Rückmeldung eines Anwenders gibt es jetzt auch zwei modifizierte Versionen des Tooltip-Skripts (ganz unten auf der Seite).

Bestehende Rollovers werden durch das Skript nicht beeinträchtigt.

Einbau in 4 Schritten

Das Skript tooltip.js (minimal modifiziert am 26. März 2009) herunter laden und ins Webverzeichnis legen. Quelltext jetzt einblenden.

var tt = new Tooltip( function(){ return document.getElementById('maincontent').getElementsByTagName('*');  });

function Tooltip(collectDOMfunction)
{
  // Simple JavaScript Tooltip
  // (c) endo.ch 2007, 2009 Christoph Berger, www.endo.ch

  var toolObj = this;
  this.tooltip = null; // DOM <div>-objekt des Tooltips
  this.ttactive = false; // true sobald Tooltip angezeigt wird
  this.collectDOMfunction = collectDOMfunction;
  
  this.updateTT = function(e) {
    if (toolObj.ttactive) {
      x = (document.all) ? e.clientX + (document.documentElement.scrollLeft | document.body.scrollLeft) : e.pageX;
      y = (document.all) ? e.clientY + (document.documentElement.scrollTop  | document.body.scrollTop)  : e.pageY;

      toolObj.tooltip.style.left = (x + 20) + 'px';
      toolObj.tooltip.style.top   = (y + 12) + 'px';
      toolObj.tooltip.style.display = 'block';
    }
  }
  
  this.showTT = function(element) {
    if (!element.tooltip)
      return;
    title = element.tooltip;
    toolObj.tooltip.innerHTML = '<p>'+title+'</p>';
    toolObj.ttactive = true;
    //toolObj.updateTT(window.event);
  }
  
  this.hideTT = function(element) {
    toolObj.tooltip.style.display = 'none';
    toolObj.ttactive = false;
  }
  
  this.init = function(){
    // an Stelle von  <div id="tooltip"></div>
    // im HTML Quellcode
    toolObj.tooltip = document.createElement('div');
    toolObj.tooltip.setAttribute('id','tooltip');
    toolObj.tooltip.style.position = 'absolute';
    toolObj.tooltip.style.display = 'none';
    document.getElementsByTagName('body')[0].appendChild(toolObj.tooltip);
    
    // an Stelle von  <img src=".." title="xyz" onmouseover="showTT(this)" onmouseout="hideTT(this)">
    // im HTML Quellcode
    var objArr = toolObj.collectDOMfunction();
    for(var i=0; i<objArr.length; i++){
      if (objArr[i].title){
        objArr[i].tooltip =  objArr[i].title;
        objArr[i].title = '';
        toolObj.addListener(objArr[i], 'mouseover', function(e){ toolObj.showTT(e.srcElement||this)});
        toolObj.addListener(objArr[i], 'mouseout', function(e){ toolObj.hideTT(e.srcElement||this)});
      }
    }
    toolObj.addListener(document, 'mousemove', toolObj.updateTT);
  }
  
  this.unload = function() {
    // Safari Problem mit Back Button beheben, indem die Änderungen
    // beim Verlassen der Seite rückgängig gemacht werden
    try{
      if (navigator.vendor && navigator.vendor.match(/Apple/)){
        var objArr = toolObj.collectDOMfunction();
        for(var i=0; i<objArr.length; i++){
          if (objArr[i].tooltip){
            objArr[i].title = objArr[i].tooltip;
          }
        }
      }
    }
    catch(e) {}
  }
  
  this.addListener = function(element, event, listener, bubble) {
    if(element.addEventListener) {
      if(typeof(bubble) == 'undefined'){
        bubble = false;
      }
      element.addEventListener(event, listener, bubble);
    } else if(document.attachEvent) {
      element.attachEvent("on" + event, listener);
    }
  }
  
  // init nach Ende des Ladevorgangs aufrufen
  this.addListener(window, 'load', this.init);
  this.addListener(window, 'unload', this.unload);
}

Die erste Zeile im Skript anpassen. Mit der angegebenen anonymen Funktion wird später (wenn die Seite fertig geladen ist) eine Liste von DOM-Objekten erzeugt und alle Objekte, die ein title Element enthalten, werden ins Skript eingehängt. Beispielsweise bearbeitet das aktuelle Skript nur den Bereich maincontent, die Hauptnavigation bleibt unberührt. Hingegen würden mit folgendem Aufruf Tooltips auf der ganzen Seite berücksichtigt, allerdings nur bei Bildern:
```
var tt = new Tooltip( function(){ return document.getElementsByTagName('img');  });
```

Die gewünschten Eigenschaften für das Objekt #tooltip erstellen, z.B. im zentralen Style Sheet. Vorschlag:

#tooltip {
	border : 1px solid #dca;
	border-width : 0px 1px 1px 0px;
	background-color : #eed;
	width : 170px;
	padding : 0;
}
#tooltip p {
	margin : 4px 8px 3px 8px;
	color : #b00;
	font-size : 11px;
	font-family : "Lucida Sans Unicode", "Lucida Grande", Myriad, Arial;
}

Die Skriptdatei mit dieser Zeile im <head>-Bereich der HTML-Seite(n) einbinden.
```
<script src="tooltip.js" type="text/javascript"></script>
```

Fertig.

Eigenschaften

Das Skript wurde für die Bildlegenden der Bilder der Woche auf www.transhumana.ch geschrieben (zur Startseite Elektronische Postkarten). Aus Lust an der Sache habe ich mir einige erschwerende Vorgaben gesetzt:

Die Texte der Javascript Box werden direkt vom title Element genommen. So kann der Browser bei ausgeschaltetem Skripting ins normale Tooltip Verhalten zurück fallen. Wird die Javascript Box angezeigt, muss das title Element gelöscht werden, sonst erscheint die normale Tooltip Box zusätzlich zur Javascript Box.
Das Skript soll unobtrusive sein. Das heisst, im HTML-Code werden keine Anpassungen gemacht. Alle benötigten Objekte und Eventhandler werden vom Skript zur Laufzeit erzeugt. Auf der HTML-Seite wird nur die Skriptdatei eingebunden.
Bestehende Eventhandler sollen durch das Skript nicht überschrieben werden.
Das Skript soll gekapselt sein, um Konflikte mit anderen Skripts zu vermeiden.
Das Skript soll mit minimalen Konfigurationsmöglichkeiten mit den wichtigen aktuellen Browsern "einfach funktionieren" (getestet mit InternetExplorer 6 & 7, Firefox 2, Opera 9, Safari 3).

Bekannte Probleme

Bei verschachtelten Elementen mit Tooltips kommt es je nach Browser dazu, dass irrtümlich der Text des unten liegenden Elements gezeigt wird. Nur mit Hilfe der Eventhandler ist es nicht möglich, zuverlässig das oberste Objekt zu ermitteln. Deshalb sollte auf verschachtelte Strukturen verzichtet werden.
Opera zeigt bei <a>-Tags immer die URL als Tooltip an. Leider wird dadurch die Javascript Box überdeckt. Tooltips bei anderen Tags funktionieren wie gewünscht.
Befindet sich die Maus beim Laden der Seite bereits über einem Objekt mit Tooltip, zeigt der InternetExplorer die Box erst an, wenn der Bereich verlassen und erneut überfahren wird. Bei grossflächigen Bereichen kann das stören.

Modifizierte Versionen

Weiche Übergänge

Dem Geschmack der Zeit folgend gibt es eine Variante des Tooltip-Skripts mit weichem Ein- und Ausblenden. Die aktuelle Version auf www.transhumana.ch entspricht dieser Variante.

tooltip_smooth.js (21. Januar 2011)

Simuliertes Tooltip-Verhalten

Ein "echtes" Tooltip erscheint verzögert und verschwindet irgendwann von selbst wieder. Natürlich kann dieses Verhalten auch im Tooltip-Skript nachgebaut werden. Das Verhalten wird duch folgende Voreinstellungen in der Klasse Sequencer gesteuert:

this.delay = 1000; // Verzögerung in ms, danach beginnt das Einblenden
this.fadeinIncrement = 120; // Schrittweite beim Einblenden in Tausendstel (1 < n < 1000). klein = langsam, gross = schnell
this.sustain = 5000; // Anzeigedauer in ms, danach beginnt das Ausblenden
this.fadeoutIncrement = -80; // Schrittweite beim Ausblenden in Tausendstel (-1 > n > -1000). 
this.maxOpacity = 900; // Opacity des fertig eingeblendeten Tooltips (1 < n < 1000) 1000 = völlig deckend

tooltip_seq.js (21. Januar 2011)