Snippet: Tooltip mit Prototype JS

October 25th, 2008

Tags: , , , ,

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 Kommentare zu “Snippet: Tooltip mit Prototype JS”

  1. 1 Tobi Says:
    October 26th, 2008 at 01:20
    Oha, schönes Script! Meins ist ähnlich aber fast 30 Zeilen lang. Werde mich daher mal von deinem inspirieren lassen :)
  2. 2 dasparadoxon Says:
    January 31st, 2009 at 07:52
    Danke schön. Funktioniert !
  3. 3 seppl Schorsch Says:
    March 3rd, 2009 at 06:23
    Vielen Dank für das Script sehr schöne Lösung und aufs Notwendige reduziert. :)
  4. 4 Martin Says:
    April 20th, 2009 at 10:51
    Besten Dank! Ich musste für ein altes Prototype-basiertes Projekt fix ein Tooltip einbauen (verwende seit geraumer Zeit Mootools) - Dein Script hat mir eine Menge Sucherei in den Prototype-Docs erspart. Den Trick mit "_title" finde ich wirklich nett. Cool!
  5. 5 eric HTC Says:
    June 13th, 2009 at 05:24
    Hallo!
    Ich möchte gern eure meinung auch mal teillen wenn ich mehr darüber wissen könte.Ich bin leider noch enfänger und habe einige diese script anzuwänden.
    Ich benutzt ein französich cms(phpboost in lokal)was auch prototype und scriptaculous.Ich bin mir nicht über meine syntax sicher um ein toolbox zu erzeugen!

    HTML:
    1. div.tooltip {
    2.     color: #000;
    3.     background-color: #FAFAFA;
    4.     position: absolute;
    5.     z-index: 9999;
    6.     padding: 5px;
    7.     margin: 5px;
    8.     margin-left: 15px; /* Abstand zum Zeiger */
    9. }
    10.  
    11.    
    12.  
    13.    
    14.       $$('a[title]').invoke('observe', 'mouseover', function(evt){
    15.           var element = evt.findElement('a'), text = element.getAttribute('title');
    16.           var tooltip = new Element('div', {'class':'tooltip'}).update(text);
    17.           element.removeAttribute('title'); element.setAttribute('_title', text);
    18.           element.insert({'after': tooltip.setStyle({'left':element.positionedOffset().first()+'px'})});
    19.           }).invoke('observe', 'mouseout', function(evt){
    20.           var element = evt.findElement('a'), text = element.getAttribute('_title');
    21.            element.removeAttribute('_title'); element.setAttribute('title', text);
    22.          if (element.next().hasClassName('tooltip')) element.next().remove();
    23.       });
    24.  
    25.  
    26.  
    27.  
    28. <a title="mein tooltip1" href="" rel="nofollow"></a>
    29.  
    30. <a title="mein tooltip" rel="nofollow"></a>
    31.  
    32.  Static html oder nur ihnalt ???

  6. 6 eric HTC Says:
    June 13th, 2009 at 05:25
    Merci für jede hilfe!
    Cordialement
    Eric.H
  7. 7 منتدى الخليج Says:
    June 27th, 2009 at 20:47
    very nice, short and sharp idea!

    it will be nice if there is a way to show HTML text in the tooltip (for example, a link to further details page, or multiple links to help topics )

  8. 8 Oliver Says:
    August 8th, 2009 at 10:42
    Besten Dank!
    Viele Grüße
  9. 9 Mojo Says:
    September 1st, 2009 at 02:44
    nicley done ;-)
  10. 10 Klara Says:
    September 21st, 2009 at 02:02
    Klasse.
    Vielen dank!
    Grüßle
    Klara
  11. 11 Tim Says:
    September 24th, 2009 at 07:32
    Servus

    genau so etwas suche ich! wie genau muss ich dass einbinden? Habe Prototype 1.6 und deinen Javascript code im tag eingebunden. Das stylesheet im tag. Nur es passiert nichts wenn ich über den mit der maus fahre..

    Bye,
    Tim


Trackbacks/Pingbacks

Noch keine Trackbacks/Pingbacks von anderen Blogs

Diesen Eintrag kommentieren