UPDATE: Eine neue cross-browserfähige Version dieses Scriptes könnt ihr hier finden: Ein einfacher Cross-Browser Tooltip mit JavaScript und CSS.

Heute möchte ich euch zeigen wie man mit wenig JavaScript sehr ansprechende Tooltips erstellen kann, die sich beliebig mit CSS formatieren lassen und deren Inhalt man mit HTML gestalten kann. Bei anderen im Netz erhältlichen Tooltip Scripten sind dafür häufig viele Zeilen Code notwendig. Ich habe jedoch versucht den Code so gering wie möglich zu halten. Worauf außerdem Wert gelegt werden sollte, ist die volle Funktionalität sowohl im Internet Explorer als auch im Mozilla. Und nicht zu vergessen eine hohe Ausführgeschwindigkeit!

Für den Tooltip benötigter HTML Code

Wir nehmen an, dass wir auf unserer Seite einen Link haben bei dem ein Tooltip erscheinen soll, wenn jemand mit der Maus darüber fährt. Wie ein Link aussieht weiß sicher jeder:

Ein Link

Den Tooltip selber definieren wir irgendwo auf der Seite, indem wir ein <div> Element erstellen und dieses mit Text füllen:

Dies ist unser erster Tooltip

Wie ihr seht haben wir dem <div> Element ein class Attribut und ein id Attribut gegeben. Über id können wir gezielt mit JavaScript darauf zugreifen und mit class können wir es mit einem CSS Style formatieren. Wie dieser Style aussieht steht hier:

Die ersten beiden Zeilen sind notwendig, damit wir den Tooltip später überall positionieren können und damit er zuerst einmal nicht auf der Seite angezeigt wird. Die dritte Zeile bestimmt einfach nur die Hintergrundfarbe. Es könnte jedoch noch beliebig erweitert werden, z.B. eine andere Textfarbe.

Das Script

So und nun wollen wir das dieses Element eingeblendet wird. Also müssen wir die CSS Eigenschaft display von none auf block umschalten:

function showWMTT(id) {
	wmtt = document.getElementById(id);
	wmtt.style.display = "block"
}

Wobei wir nun mit document.getElementById(id) über das vorhin definierte Attribut id auf das Element zugreifen und den Wert ändern. Und schon wird der Tooltip angezeigt. Doch noch nicht an der richtigen Position. Da wir wollen das es an der Stelle erscheint wo sich gerade die Maus befindet müssen wir die Mausposition abfragen und dann die top und left Eigenschaften des Elementes entsprechend anpassen:

document.onmousemove = updateWMTT;

function updateWMTT(e) {
	if (wmtt != null && wmtt.style.display == 'block') {
		x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
		y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
		wmtt.style.left = (x + 20) + "px";
		wmtt.style.top 	= (y + 20) + "px";
	}
}

Dieser Code ist auf dem ersten Blick etwas kompliziert, aber im Grunde fragt er je nach Browser auf unterschiedliche Weise die aktuelle Mausposition ab und setzt dann den Tooltip entsprechend. Allerdings addieren wir hier jeweils noch 20 Pixel damit der Tooltip etwas nach unten rechts versetzt erscheint. Diese Funktion wird immer automatisch dann aufgerufen, wenn sich die Mausposition ändert.

Nun brauchen wir nur noch eine Funktion, die den Tooltip wieder ausblendet, wenn wir dies wollen:

function hideWMTT() {
	wmtt.style.display = "none";
}

Zum Abschluß passen wir unseren Link von vorhin noch so an, das jeweils bei MouseOver die Funktion showWMTT und beim MouseOut die Funktion hideWMTT aufgerufen wird:


Unser Link

Jetzt sollte auf unserer Seite folgendes Ergebnis zu sehen sein:

Dies ist unser erster Tooltip
Dieser ist schöner mit CSS formatiert worden!
Überschrift

Hier kann beliebiger Text stehen! Der auch beliebig mit HMTL angereichert sein kann.

Zum Beispiel auch eine Tabelle:

Ich bin
eine Tabelle

Unser Link

Weitere Tooltips Beispiele

Unser Link jedoch mit CSS angepasst

Unser Link jedoch mit HTML Inhalten

Unser Link jedoch mit Bild im Tooltip

Unser Link mit dem gleichen Bild nur transparent

Der komplette Tooltip Code

Und jetzt noch einmal übersichtlich der komplette Code:

Diese Artikel könnten dich auch interessieren:

66 thoughts on “Wirklich einfache JavaScript Tooltips

  1. Danke für den Hinweis! Jetzt funktioniert es auch im IE6!

    Das Problem war, dass der IE6 document.body.scrollTop im standardkonformen Modus (mit Doctype) nicht auslesen kann, nur im Quirksmode! Damit es in beiden Fällen funktioniert, muss man folgendes verwenden: wmtt.offsetParent.scrollTop.

    Mit der Umstellung von webmatze.de auf das neue Design, habe ich die Seiten jetzt auch in den standardkonformen Modus umgestellt, konnte aber nicht alle 300 Seiten in allen Browsern testen. ;-)

  2. Sehr anschaulich geschrieben!

    Für W3C Kompatibilität sollte man statt:

    onMouseOver=“showWMTT(‚1‘)“ onMouseOut=“hideWMTT()“

    onmouseover=“showWMTT(‚1‘)“ onmouseout=“hideWMTT()“

    schreiben.

  3. Hallo ein wirklich tolles Script, gefällt mir sehr gut.

    Ich habe es auch mal ausprobiert. Nur habe ich ein kleines Problem.

    Ich habe bei
    wmtt.style.left = (x + 20) + „px“;
    wmtt.style.top = (y + 20) + „px“;

    die Werte angepasst

    wmtt.style.left = (x – 75) + „px“;
    wmtt.style.top = (y + 20) + „px“;

    damit derTooltip (mit Bild) direkt neben dem Mauszeiger angezeigt wird, im FF klappt das auch wunderbar, aber im IE 7 ist die Tooltip box, gute 50px weiter nacht rechts verschoben.

    Hat jemand ne Idee warum?

    Vielen Dank
    und ein schönes WE

  4. Super Sache dein Script! Wirklich einfach und wirkungsvoll!
    Kleine Korrektur noch:
    <a href=“#“ onmouseover=“showWMTT('1')“ onmouseout=“hideWMTT()“>
    hier feheln nach den javascript-funktionen die Strichpunkte. Mein Editor sagt das mal zumindest, ich kenne mich nicht so aus, dass ich jetzt sagen könnte dass es so ist.

    Gruss

  5. Hi!

    Schöne Anleitung mit schön übersichtlichem Code.

    Allerdings erscheinen bei mir die Tooltip-Anzeigen in Firefox und Opera um ca. 200px nach rechts verschoben, nur beim erscheinne sie korrekt rechts neben dem Mauszeiger.

    Ist das nur bei mir so?

    Stefan

  6. Hi!

    Sry für die noob Frage.. aber jeder war mal ein newbie, nicht??

    Zur Frage:

    Wo kann ich folgende Dinge definieren??:

    – Den Namen des Links.

    – Die Seite, die beim Link aufgerufen werden soll.

    – Wo kann ich die Einstellungen machen, damit ein Bild als tooltipp erscheint und das es transparenter ist.

    thx 4 resonding

    ^^'

    lg simon

    1. Hallo Simon,

      also den Namen und das Ziel eines Links definierst du so:

      Der Name des Links

      Damit der Tooltip ein Bild enthält und transparent wird, habe ich folgendes als Tooltipinhalt definiert (Siehe auch den Quellcode dieser Seite)

      <div id=“4″ class=“tooltip3″><img src=“http://old.webmatze.de/webdesign/html/media/bear.jpg“ alt=““ /></div>

      Und in den Styleangaben habe ich folgendes definiert:

      <style type=“text/css“>
      .tooltip3 {
      position: absolute;
      display: none;
      }
      .tooltip3 img {
      -moz-opacity: 0.4;
      filter: alpha(Opacity=40);
      }
      </style>

      Ansonsten ist alle im Artikel erklärt.

  7. Hi!

    Ich hatte das Problem, dass der Tooltip nach einer Aktualisierung über AJAX im IE einen unbekannten Fehler ausspuckte, weil er vermutlich das dynamisch nachgeladene Parent-Object beim zweiten Laden nicht wiederfinden konnte. Fehler kam aber nur beim ersten Aufruf des Tooltipps (Updatefunktion), danach zeigte er es an (vermutlich durch die interne Aktualisierung im Browser im Hintergrund).
    Hierbei hat sich folgender Workaround bewährt, vielleicht ist er ja interessant für dich (danke jedenfalls für das schöne, einfache Script!):

    function updateWMTT(e)
    {
    if (wmtt)
    {
    if(typeof wmtt.offsetParent==’object‘)
    {
    x = (!e) ? window.event.x + wmtt.offsetParent.scrollLeft : e.pageX;
    y = (!e) ? window.event.y + wmtt.offsetParent.scrollTop : e.pageY;
    }
    else
    {
    x = (!e) ? window.event.x + document.body.scrollLeft : e.pageX;
    y = (!e) ? window.event.y + document.body.scrollTop : e.pageY;
    }
    wmtt.style.left = (x + 10) + „px“;
    wmtt.style.top = (y + 10) + „px“;
    }
    }

  8. Hi

    Vielen Dank für das Tutorial, genau das was ich schon lange gesucht habe.

    Nachdem ich das alles bei mir eingebaut habe, funktioniert es bei mir aber noch nicht ganz wunschgemäss.

    Wenn ich mit der Maus über den Link fahre, wird der Tooltip eifach als Text auf der nächsten Zeile angezeigt, der Tooltip verschiebt sich also nicht mit der Maus und wird auch nicht über den anderen Seitenelementen angezeigt.

    Hier, die relevanten Teile meines Codes:

    Ich habe das CSS direkt ins DIV hineingenommen:

    Der Link:

    echo „Ein Link„;

    Der Tooltip:

    echo „Dies ist der Toooooltip“;

    Das Script:

    Wäre super, wenn mir da jemand bei der Fehlersuche helfen könnte (ich bin mit javascript noch nicht so vertraut)..

    Danke & Gruss

    Michael

  9. Hm, das hat was nicht ganz geklappt, ich versuchs nochmal mit dem code.
    habe die tags abgeschnitten, damit der code angezeigt wird.

    a onMouseOver=\“showTooltip(‚10000‘);\“ onMouseOut=\“hideTooltip();\“ href=\“#\“>Ein Link
    div id=\“10000\“ style=\“font-weight:bold; position:absolute; display:none; background-color:#FFFFFF;\“>Dies ist der Toooooltip

    tooltipElement = null;

    document.onmousemove = updateTooltip;

    function showTooltip(id)
    {
    tooltipElement = document.getElementById(id);
    tooltipElement.style.display = „block“;
    }

    function updateTooltip(e)
    {
    if (tooltipElement != null)
    {
    x = (document.all) ? window.event.x + tooltipElement.offsetParent.scrollLeft : e.page.X;
    y = (document.all) ? window.event.y + tooltipElement.offsetParent.scrollTop : e.page.Y;

    tooltipElement.style.left = (x + 20) + „px“;
    tooltipElement.style.top = (y + 20) + „px“;
    }
    }

    function hideTooltip()
    {
    tooltipElement.style.display = „none“;
    }

  10. Hallo Michael, ich könnte mir vielleicht vorstellen, dass du auf deiner Seiter noch ein anderes JavaScript verwendest, welches sich vielleicht mit dem Tooltip nicht verträgt.

    Vielleicht überschreibt das andere Script den document.onmousemove Event. Wodurch dann der Tooltip zwar immer noch angezeigt wird, aber sich nicht mehr an die Mausposition anpasst.

    Vielleicht kannst du mir einen Link auf deine Seite schicken, dann kann ich mir das genauer ansehen.

  11. Hi

    Ich habe den Fehler mittlerweile etwas eingrenzen können.

    Das Problem liegt darin, dass das Tooltipelement zum Zeitpunkt, wenn die Update Funktion aufgerufen wird null ist. Und das obwohl es zuvor in der Funktion showTooltip korrekt initialisiert wird.
    Woran kann es liegen, dass das Tooltip element beim update dann wieder mit null daher kommt?

    Einen Link zur Seite kann ich dir leider nicht geben, da ich auf einem Passwort geschützten Server entwickle, welcher nicht mir gehört.
    Ich könnte dir aber den Code der betreffenden Seite mailen.

    Gruss Michael

  12. Danke vielmals für diese tolle Anleitung.

    Wenn man das ganze variabel macht, kann man das Script perfekt fürs Auslesen von Datensätzen + Vorschaubilder aus der DB verwenden. (so wie ich es gebraucht hab)

    <td onmouseover="showWMTT('‘)“ onmouseout=“hideWMTT()“>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet
    <div id="“ class=“tooltip“><img src="„>

    Cheers,
    Michael

  13. Hallo,

    erstmal vielen Dank für das kurze und klasse Beispiel!

    Der Vollständigkeitshalber zum Beipsiel Code oben: In der Funktion „function showWMTT(id)“ fehlt hinter „block“
    noch das Semikolon.

    Grüße

  14. Hay super erklärt! ist echt klasse , und für alle, die noch die breite und höhe des tooltips einstellen wollen, wäre diese zeile wichtig ;)

    nach der verschiebung nach unten und rechts:

    wmtt.style.width = (300) + „px“;
    wmtt.style.height = (200) + „px“;

  15. Servus Mathias,
    Respekt zur Seite http://webmatze.de.

    Ich habe nur eine Frage. Hast Du einen Vorschlag der im IE das Tooltip über ein … stellt.
    Das Tooltip erscheint im Hintergrund.
    Beispiel unter http://kimminger.de/tooltip/1.htm
    Mit Firefox, Opera, Konqueror, Seamonkey klappt das perfekt. Nur IE macht Probleme.
    Sollte ich etwas übersehen haben, gib mir Bitte Rückmeldung. Danke für Deine Hilfe.
    SG
    Andi

    1. Das ist leider eins der vielen Probleme vom IE. Das Select Tag wird dort nicht vom Browser selber, sondern vom Betriebssystem gerendert.

      Es gibt hier zwei Möglichkeiten.

      1. Man lässt das Select Tag automatisch ausblenden, wenn der Tooltip es berührt. Sieht leider dann nicht so schön aus und ist auch schwierig zu programmieren.
      2. Man blendet hinter dem Tooltip ein IFRAME Tag mit der gleichen Größe wie der Tooltip selber ein. Nur mit so einem IFRAME kann man das Select Tag überdecken.

      Für das zweite Beispiel würde der Code dann so aussehen:

      <html>
      <head>
      <script type="text/javascript">
      <!--
      wmtt = wmttbg = null;
      document.onmousemove = updateWMTT;
      function updateWMTT(e) {
        if (wmtt != null) {
          x = (document.all) ? window.event.x + wmtt.offsetParent.scrollLeft : e.pageX;
          y = (document.all) ? window.event.y + wmtt.offsetParent.scrollTop  : e.pageY;
          wmtt.style.left = wmttbg.style.left = (x + 20) + "px";
          wmtt.style.top = wmttbg.style.top = (y + 20) + "px";
        }
      }
      function showWMTT(id) {
      	wmtt = document.getElementById(id);
      	wmttbg = document.getElementById('tooltip_background');
      	wmtt.style.display = wmttbg.style.display = "block"
      }
      function hideWMTT() {
        wmtt.style.display = wmttbg.style.display = "none";
      }
      // -->
      </script>
      <style type="text/css">
      	<!--
      	.tooltip {
      	  position: absolute;
      	  display: none;
      	  background-color: #FFFFFF;
      	  width: 100px;
      		height: 40px;
      		border: 1px solid black;
      	}
      	-->
      </style>
      </head>
      <body>
      <iframe class="tooltip" style="border: none" id="tooltip_background"></iframe>
      <a onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#">
      Unser Link
      </a><br/>
      <select>
      	<option>Das ist nur eine Testauswahl</option>
      	<option>Test 2</option>
      </select>
      <div id="1" class="tooltip">Dies ist unser erster Tooltip</div>
      </body>

      Wichtig ist, dass das IFRAME Tag ganz am Anfang im Code steht. Außerdem muss sowohl dem Tooltip als auch dem IFRAME eine feste Breite und Höhe zugewiesen werden.

  16. Hallo,
    vielen Dank für das super Beispiel. Wollte das Tooltip in meinen xt:commerce-Shop einbauen. Leider wurde nichts angezeigt. Ich vermute eine Unverträglichkeit mit einem anderen Javascript. Ich habe Tooltip nun zunächst wieder entfernt. Kann mir eventuell jemand helfen. URL der Seite http://www.meacult.de

  17. Hallo,
    wenn ich das Script in meinen xt:commerce-Shop einbaue erhalte ich folgende Meldung: Fatal error: Smarty error: [in WebStore/module/product_listing/_product_listing_v1.html line 14]: syntax error: unbalanced parenthesis in if statement (Smarty_Compiler.class.php, line 1268) in /www/htdocs/w009fe48/meacult/includes/classes/Smarty_2.6.14/Smarty.class.php on line 1099
    Kann mir eventuell jemand helfen?

  18. Hallo,

    erstmal tolle Script !

    Ich habe da mal ein Frage

    so sieht ein normaler Link aus :
    0

    wenn ich anstatt der ID etwas in html einbinden, funktioniert das Script nicht mehr. Wie kann ich nun anstatt der ID, zB. einfach einen einfügen.

    Vielen Dank und Frohe Weihnachten

    Fruß Sebastian

  19. JUHUUUUUUUUUU.
    Danke, endlich ein Script der auch bei firefox funktioniert.
    Super, habs für mich angepasst und es klappt^^

    Einen fetten DANK

  20. Hallo

    Vielen Dank für dein Script. Momentan nimmt es ja den oberen linken Ecken vom Tooltip als referenzpunkt um es von der Maus zu verschieben. Ist es möglich dem ganzen zu sagen dass es den oberen rechten Ecken als sogenannter Nullpunkt nimmt?

    Kann mir da jemand helfen?

    Beste Grüsse
    Michi

  21. hallo Michi dass sollte eigentlich ziemlich einfach zu lösen sein. Dr mußt einfach nur folgende Zeile anpassen.

    wmtt.style.left = (x + 20) + „px“;

    Wenn du hier das left gegen ein right austauscht, sollte es funktionieren.

    wmtt.style.right = (x + 20) + „px“;

    Du kannst auch die Abstände anpassen, indem du die 20 änderst.

  22. Hello,

    Danke für deine Hilfe :)
    Das habe ich bereits ausprobiert, allerdings funktioniert dann das verfolgen des Mauspfeils nicht mehr richtig. Die X Achse ist dann verdreht. Ich gehe mit der Maus nach Links und der Tooltip geht nach Rechts…

    Wenn ich wmtt.offsetParent.scrollleft auf right setze ändert das auch nichts… :(

    Muss ich da noch einen Parameter anpassen?

    Besten Dank
    Cheers Michi

  23. Ich hatte noch die Idee das ich einfach verschiedene Scripts mache. Sprich: für jeden Tooltip der eine andere Position haben muss ein seperates Script. Nur funktioniert das eben auch nicht so richtig wie ich möchte. Hier mal mein Beispiel:

    Ich dachte mir aus WMTT mache ich zwei neue ID’s REC und LEAD und spreche diese dann im Html entsprechend an…

    lead = null;
    document.onmousemove = updateLEAD;
    function updateLEAD(e) {
    if (lead != null) {
    x = (document.all) ? window.event.x + lead.offsetParent.scrollLeft : e.pageX;
    y = (document.all) ? window.event.y + lead.offsetParent.scrollTop : e.pageY;
    lead.style.left = (x – 735) + „px“;
    lead.style.top = (y + 13) + „px“;
    }
    }
    function showLEAD(id) {
    lead = document.getElementById(id);
    lead.style.display = „block“
    }
    function hideLEAD() {
    lead.style.display = „none“;
    }

    rec = null;
    document.onmousemove = updateREC;
    function updateREC(e) {
    if (rec != null) {
    x = (document.all) ? window.event.x + rec.offsetParent.scrollLeft : e.pageX;
    y = (document.all) ? window.event.y + rec.offsetParent.scrollTop : e.pageY;
    rec.style.left = (x – 300) + „px“;
    rec.style.top = (y + 13) + „px“;
    }
    }
    function showREC(id) {
    rec = document.getElementById(id);
    rec.style.display = „block“
    }
    function hideREC() {
    rec.style.display = „none“;
    }

    Ich denke es liegt daran das ich zwei mal hintereinander die Mausposition auslese…. Allerdings frage ich mich, wie ich die Position Global auslese und anschliessend nur noch sage: rec hat Position xy und lead hat position xyz

  24. Au weia… Meinen Kommentar bitte wieder rauslöschen… Es lag am fehlenden CSS-Element ;-)

    Viele Grüße und danke für das super Tutorial!!!

    Marco

  25. @Michi: Ich würde an deiner Stelle einfach die Funktion updateWMTT(e) anpassen und zwei Parameter mit aufnehmen, updateWMTT(e , xoff, yoff).

    Dann kannst du dort deine eigenen Abstände eingeben und musst diese entsprechen im Code übernehmen.

    Also statt:
    wmtt.style.left = (x + 20) + „px“;
    wmtt.style.top = (y + 20) + „px“;

    Einfach:

    wmtt.style.left = (x + xoff) + „px“;
    wmtt.style.top = (y + yoff) + „px“;

  26. Hey webmatze

    Danke für die Antwort. Hab das mal so probiert:

    // JavaScript Document

    lead = null;
    document.onmousemove = updateLEAD;
    function updateLEAD(e , xoff, yoff) {
    if (lead != null) {
    x = (document.all) ? window.event.x + lead.offsetParent.scrollRight : e.pageX;
    y = (document.all) ? window.event.y + lead.offsetParent.scrollTop : e.pageY;
    lead.style.right = (x – 735) + „px“;
    lead.style.top = (y + 13) + „px“;
    lead.style.right = (x + xoff) + „px“;
    lead.style.top = (y + yoff) + „px“;
    }
    }
    function showLEAD(id) {
    lead = document.getElementById(id);
    lead.style.display = „block“
    }
    function hideLEAD() {
    lead.style.display = „none“;
    }

    Aber irgendwie bugt das ziemlich rum. Vermutlich weil ich einen Fehler eingebaut habe?

  27. Bei mir funktioniert das im FF sehr gut, im IE gibt er mir den Fehler „pageX“ ist Null oder kein Objekt. Der Tooltip erscheint zwar, aber nicht neben meiner Maus sondern unterhalb von meinem Bild mit Imagemaps. Hat jemand ne Ahnung was da falsch ist?

  28. Habe es gelöst, e war nicht definiert:

    x = (e != null ? e.clientX : window.event.x) + wmtt.offsetParent.scrollLeft – wmtt.offsetParent.offsetLeft;
    y = (e != null ? e.clientY : window.event.y) + wmtt.offsetParent.scrollTop – wmtt.offsetParent.offsetTop;

  29. Hab das gleiche Problem wie Marco:
    „Bei mir funktioniert das im FF sehr gut, im IE gibt er mir den Fehler “pageX” ist Null oder kein Objekt. Der Tooltip erscheint zwar, aber nicht neben meiner Maus sondern unterhalb von meinen Bildern“
    Wenn ich die Änderung von Marco nehme, wird im FF gar kein Tooltip mehr angezeigt und im IE kommt der Fehler:

    Meldung: Objekt erwartet
    Zeile: 31
    Zeichen: 1
    Code: 0
    URI: http://www.gehorsam-mit-spass.de/aa_test/wohnung.php

    Kann mir jemand weiter helfen? Das Script ist ansonsten echt klasse!!!

  30. so hab jetzt eine ganze weile dran gehangen. hab mitlerweile eine lösung gefunden, die im FF und IE funktionieren. hier mal der komplette javascript code, falls wieder mal jemand das problem hat:

  31. function normalizeEvent(e)
    {
    if(window.event){e = window.event;}
    if(e.pageX)
    {
    e.clientX = e.pageX;
    e.clientY = e.pageY;
    }
    else if(e.clientX)
    {
    e.pageX = e.clientX;
    e.pageY = e.clientY;
    }

    return e;
    }

    wmtt = null;
    document.onmousemove = updateWMTT;
    function updateWMTT(e)
    {
    if (wmtt != null && wmtt.style.display == ‚block‘)
    {

    x = (e != null ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft – wmtt.offsetParent.offsetLeft;
    y = (e != null ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop – wmtt.offsetParent.offsetTop;
    wmtt.style.left = (x – 410) + „px“;
    wmtt.style.top = (y – 310) + „px“;
    }
    }

    function showWMTT(id) {
    wmtt = document.getElementById(id);
    wmtt.style.display = „block“;
    }
    function hideWMTT() {
    wmtt.style.display = „none“;
    }

    1. Ich glaube durch die ganzen neuen Browser-Versionen sowohl von Internet Explorer als auch Firefox usw. scheint der Code nicht mehr so zu funktionieren, wie es damals der Fall war.

      Ich werde mich mal an eine komplett neue Version setzen, die in allen Browsern funktioniert und welche auch einfacher zu verwenden ist.

  32. Hallo Matze, richtig cooles Tool, nur leider funktioniert es nicht in allen Browsern (hast du ja selbst in deinem letzten post geschrieben)

    ich hab eine Möglichkeit gefunden, dass es funktioniert:

    var ie = document.all;
    wmtt = null;
    document.onmousemove = updateWMTT;
    function updateWMTT(e) {
    if (wmtt != null && wmtt.style.display == ‚block‘) {

    if(ie) {
    x = window.event.x + 20;
    y = window.event.y + 200;
    }
    else {
    x = e.pageX + wmtt.offsetParent.scrollLeft – wmtt.offsetParent.offsetLeft + 20;
    y = e.pageY + wmtt.offsetParent.scrollTop – wmtt.offsetParent.offsetTop + 20;
    }

    wmtt.style.left = x + „px“;
    wmtt.style.top = y + „px“;
    }
    }

    und zwar hab ich noch eine zusätzliche Browserweiche eingebaut, da der IE „e.pageY“ und „e.pageX“ nicht akzeptiert hat und somit das ganze Script nicht ausgeführt hat. Und dann hab ich die Position beim IE noch angepasst (um 200 nach unten verschoben)

    Zusätzlich sollte man aufpassen, wenn man ein Div Layout hat, dass man „…“ in den richtigen Container setzt, sonst erscheint der Tooltip unter der Seite und die Mauszeigerpositionen werden ignoriert.

    Getestet ürbrigens:
    Windoof: IE 6, 7 und 8 und Mozilla 3.5.7
    Mac: Mozilla 3.6.8, Safari 5.0.1 und Opera 10.10

    Eingebaut in der Page: http://home.eyesofhope.de/webseiten/merkle/ (diese Befindet sich noch im Aufbau)

    Grüße Timo

  33. Hallo Timoxy. Seit Wochen kämpfe ich mit dem selben Problem: im FF alles OK, aber im verd.. IE(8) erscheint der ToolTip ganz unten links im -Gerüst (also schon mal 1, 2 Scrollseiten tiefer, also unsichtbar). Dein ganzer Teil des Scripts in _javascript.js kopiert und angepasst: Es erscheint _kein_ ToolTip mehr, auch nicht im FF… ;o)
    Auch ich hoffe natürlich auf ein baldiges Update von webmatze – Danke!

  34. Hey Matze,
    cooles Script, leider funzt es im IE nicht. Hast du das neue Script fertig? Ich würde mich ziemlich freuen, wenn du es posten könntest, damit der Tooltip auch im IE funktioniert :)

    Vielen Dank!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Back to Top