Oct
25

Snippet: Tooltip mit Prototype JS

Tooltips.. die kleinen Text-Popups die einem helfen sich zu orientieren. Immer wieder gerne gesehen und wurde auch schon zig-mal programmiert.

Ich hab mir schon so einige fertige Scripts angesehen, aber die meisten machen einfach viel zu viel und nutzen teilweise sogar selber Prototype, nur leider nicht effizient genug.

Meistens werden die DIVs beim Aufruf der Seite generiert und irgendwo unterhalb des BODYs "versteckt". Bei sehr vielen Tooltips/Links kann das den Seitenaufbau extrem verlangsamen. Andere wiederum berechnen gott-weiss-was und haben einen mehrseitigen Umfang. Da oft gleich auch eine Klasse geschrieben wird muss man meist eine weitere Scriptdatei laden, was nochmals den Aufbau verzögert.

Ich schreibe daher meine Tooltips immer selber und bin mittlerweile runter auf 10 Zeilen. Könnte sogar in einer passen, aber man will ja nicht den Überblick verlieren.

JAVASCRIPT:
  1. $$('a[title]').invoke('observe', 'mouseover', function(evt){
  2.     var element = evt.findElement('a'), text = element.getAttribute('title');
  3.     var tooltip = new Element('div', {'class':'tooltip'}).update(text);
  4.     element.removeAttribute('title'); element.setAttribute('_title', text);
  5.     element.insert({'after': tooltip.setStyle({'left':element.positionedOffset().first()+'px'})});
  6. }).invoke('observe', 'mouseout', function(evt){
  7.     var element = evt.findElement('a'), text = element.getAttribute('_title');
  8.     element.removeAttribute('_title'); element.setAttribute('title', text);
  9.     if (element.next().hasClassName('tooltip')) element.next().remove();
  10. });

  • Es wird OnMouseOver ein DIV kreiert mit dem Inhalt des TITLE Attributs eines Links. OnMouseOut wird das DIV einfach wieder entfernt.
  • Damit das Browser Tooltip nicht zusätzlich angezeitg wird, verschiebe ich bis zum OnMouseOut den Inhalt des TITLE Attributs kurz in ein Fake-Attribut namens _TITLE.
  • Der Selector a[title] wählt nur Anker die auch wirklich ein TITLE Attribut haben. Somit brauchen wir auch nicht mehr zu kontrollieren ob eines vorhanden ist.
  • Vom Javascript aus wird nur LEFT gesetzt, TOP braucht man nicht zwingend.
  • Am Ende von OnMouseOut prüfe ich ob das nächste Element wirklich die tooltip Klasse hat. Das ist nur eine reine Vorsichtsmaßnahme. Wer dennoch Probleme hat könnte etwas radikaler einfach alle DIVs mit dieser Klasse löschen via getElementsByClassName (ist am schnellsten).

Das nachfolgende CSS kümmert sich um den z-Index und den Abstand zum Cursor.

div.tooltip {
    color: #000;
    background-color: #FAFAFA;
    position: absolute;
    z-index: 9999;
    padding: 5px;
    margin: 5px;
    margin-left: 15px; /* Abstand zum Zeiger */
}

So, und das war's. Wenn man nun irgendwo auf der Seite ein <a ... title="mein tooltip"> platziert hat man einen Link mit Tooltip. Zero config, wenn man so will.

Man kann natürlich auch ohne Probleme auf andere Elemente erweitern. Beispiel: $$('a[title], img[title]')...

Falls jemand Verbesserungsvorschläge hat: Immer her damit!
Script wurde in IE, FF und Safari getestet.

11 Comments »