Wirklich einfache JavaScript Tooltips
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:
<a href="#">Ein Link</a>
Den Tooltip selber definieren wir irgendwo auf der Seite, indem wir ein <div> Element erstellen und dieses mit Text füllen:
<div id="1" class="tooltip">Dies ist unser erster Tooltip</div>
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:
<!--
.tooltip {
position: absolute;
display: none;
background-color: #FFFFFF;
}
-->
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) { 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 = (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:
<a onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#"> Unser Link </a>
Jetzt sollte auf unserer Seite folgendes Ergebnis zu sehen sein:
Hier kann beliebiger Text stehen! Der auch beliebig mit HMTL angereichert sein kann.
Zum Beispiel auch eine Tabelle:
| Ich | bin |
| eine | Tabelle |
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:
<script type="text/javascript"> <!-- wmtt = 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 = (x + 20) + "px"; wmtt.style.top = (y + 20) + "px"; } } function showWMTT(id) { wmtt = document.getElementById(id); wmtt.style.display = "block" } function hideWMTT() { wmtt.style.display = "none"; } // --> </script>
Super, einfach beschrieben.
Besten Dank !
Ziemlich klasse :-)
Vielen Dank!
Einfach genial, danke!
Funktioniert im IE 6 aber nicht….
Danke für den Hinweis! Jetzt funktioniert es auch im IE6!
Das Problem war, dass der IE6
document.body.scrollTopim 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. ;-)
Sehr anschaulich geschrieben!
Für W3C Kompatibilität sollte man statt:
onMouseOver=”showWMTT(‘1′)” onMouseOut=”hideWMTT()”
onmouseover=”showWMTT(‘1′)” onmouseout=”hideWMTT()”
schreiben.
Danke für den Hinweis! Habe die entsprechenden Stellen angepasst.
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
super gemacht. tausend dank :)
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
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
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
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.
PopUp per Link öffnen…
Hallo, ich habe vor einiger Zeit mal ein kleines Tutorial geschrieben, in dem genau gezeigt wird, wie man ein Popup oder auch Tooltip anzeigen lassen kann, wenn man mit der Maus dr……
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”;
}
}
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
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”;
}
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.
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
Vielen Dank, sehr gutes Artikel
Hey danke, hat meinen Code um ein paar Zeilen verkürzt. Thx for share
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
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
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”;
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
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.
Super – Danke.
Du bist ja schneller als die Polizei erlaubt ;-).
Schöne Grüße aus dem Bayerischen Wald
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
Mit eingebautem Script wäre es natürlich einfacher, den Fehler zu finden. So ist es etwas schwierig. Kann sich nur um eine Kleinigkeit handeln.
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?
Hallo Alex,
kann mir Dein xtCommerce Problem gern mal ansehen, dann einfach per Mail oder Kontakt über snyware.com melden.
Gruß Stephan
Hallo,
ich habe ein kleines Problemchen.
Das Skript funktioniert soweit einwandfrei, außer dass in firefox (Vers.3.5.6) die Toolbox ca. 200px rechts und unterhalb des Mauszeigers angezeigt wird. Im IE wird es richtig angezeigt. Wo liegt der Fehler?
Hier der Link: http://trixer.sixtogether.de/new/php/kurse.php
Gruß André
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
JUHUUUUUUUUUU.
Danke, endlich ein Script der auch bei firefox funktioniert.
Super, habs für mich angepasst und es klappt^^
Einen fetten DANK
[...] http://webmatze.de/wirklich-einfache-javascript-tooltips/ [...]