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:
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:
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.
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
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
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.
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
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
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
@Marco: Ist hier mit geschehen. :o)
@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“;
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?
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?
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;
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!!!
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:
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“;
}
schade, der code lässt sich nicht posten…
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.
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
„…“ sollte „!div id=“1″ class=“tooltip“!..!/div! heißen
Danke Timoxy. Habe inzwischen auch ein komplett neues Script geschrieben und werde dies in den nächsten Tagen veröffentlichen. Muss es erst noch ausgiebig teste. :)
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!
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!
Hallo Chris,
das neue Script ist heute online gegangen: http://webmatze.de/ein-einfacher-cross-browser-tooltip-mit-javascript-und-css/
Ich hoffe du kannst es gebrauchen und dass es auch überall richtig funktioniert. Am besten einfach mal austesten.
Matze