Vor einiger Zeit habe ich hier auf webmatze.de einen einfachen auf JavaScript und CSS basierenden Tooltip vorgestellt, mit dem sich schnell und einfach Tooltips in die eigenen Seiten integrieren ließen. Dieser funktionierte soweit auch ganz gut in vielen Browsern, doch die Zeit ist nicht stillgestanden und seit der Veröffentlichung hat es einige neue Browserversionen und sogar ganz neue Browser gegeben.
Leider führte dies auch dazu, dass das alte Tooltip Script nun leider nicht mehr in allen wichtigen Browsern funktioniert. Aber auch in den Browsern, wo es funktionierte, ist es unter Umständen zu Fehlern gekommen.
Dies will ich nun zum Anlass nehmen und euch ein komplett neues Tooltip Script zur Verfügung stellen.
XBT - Der Cross-Browser Tooltip
Okay, über Namen lässt sich bestimmt streiten, aber irgendwie muss das Kind ja heißen. Das neue Script basiert auf ein paar Zeilen JavaScript und ist nur geringfügig größer als das alte Script. Dafür ist es jedoch viel flexibler zu konfigurieren, kollidiert nicht mit anderen Scripten und lässt sich leicht über CSS beliebig anpassen. Und wer möchte, kann das Script auch ohne Probleme um neue Funktionen erweitern.
Hier könnt ihr den Code sehen:
(function (window, document, undefined) {
var XBTooltip = function (element, userConf, tooltip) {
var config = {
id: userConf.id || undefined,
className: userConf.className || undefined,
x: userConf.x || 20,
y: userConf.y || 20,
text: userConf.text || undefined
};
var over = function (event) {
tooltip.style.display = "block";
},
out = function (event) {
tooltip.style.display = "none";
},
move = function (event) {
event = event ? event : window.event;
if (event.pageX == null && event.clientX != null) {
var doc = document.documentElement, body = document.body;
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
tooltip.style.top = (event.pageY + config.y) + "px";
tooltip.style.left = (event.pageX + config.x) + "px";
}
if (tooltip === undefined && config.id) {
tooltip = document.getElementById(config.id);
if (tooltip) tooltip = tooltip.parentNode.removeChild(tooltip)
}
if (tooltip === undefined && config.text) {
tooltip = document.createElement("div");
if (config.id) tooltip.id = config.id;
tooltip.innerHTML = config.text;
}
if (config.className) tooltip.className = config.className;
tooltip = document.body.appendChild(tooltip);
tooltip.style.position = "absolute";
element.onmouseover = over;
element.onmouseout = out;
element.onmousemove = move;
over();
};
window.XBTooltip = window.XBT = XBTooltip;
})(this, this.document);Das einzig wirklich benötigte CSS für den Tooltip sieht so aus:
.xbtooltip {
display: none;
position: absolute;
background-color: #fff;
}Dieser kann aber für jeden einzelnen Tooltip noch einmal separat überschrieben werden. Doch dazu später mehr.
Tooltip Beispiele
Kommen wir also zu ein paar einfachen Beispielen, wie man das XBT Tooltip Script einsetzen kann.
Einfacher Tooltip
Der einfachste mögliche Tooltip benötigt einen Link und ein DIV Element mit dem anzuzeigenden Inhalt für den Tooltip.
<a href="http://webmatze.de" onMouseOver="XBT(this, {id:'tt1'})">Ein normaler Tooltip...</a>
<div id="tt1" className="xbtooltip">...mit bereits vorhandenem Inhalt.</div>Dem Tooltip Script wird also über eine Konfiguration welche in geschweiften Klammern steht, die id des Elementes übergeben, welches den Inhalt für den Tooltip enthält. Mehr ist hier nicht notwendig.
Das entsprechende CSS dazu kann z.B. so aussehen:
#tt1 {
background-color: #00FFFF;
color: green;
padding: 3px;
width: 120px;
}Und so sieht dann der Link mit dem Tooltip aus:
Inhalt als Konfiguration übergeben
Wer nicht extra für jeden Tooltip ein extra DIV Element erstellen möchte, kann den gewünschten Inhalt für den Tooltip auch gleich als text übergeben. Das kann dann z.B. so aussehen:
<a href="http://webmatze.de"
onMouseOver="XBT(this, {text: '...indem man ihn <strong>als Text</strong> übergibt', className: 'xbtooltip'})">
Man kann den Inhalt des Tooltips auch dynamisch erstellen lassen...
</a>Als Konfiguration wird also nicht mehr eine id übergeben, sondern ein beliebiger Text, der auch HTML Elemente enthalten kann. Über den Parameter className kann man dem Tooltip dann einen beliebigen Style zuordnen.
Und so sieht das Ganze dann aus:
Man kann den Inhalt des Tooltips auch dynamisch erstellen lassen...
Den Abstand des Tooltips anpassen
Wenn man möchte, dass der Tooltip nicht direkt neben dem Mauszeiger, sondern weiter entfernt angezeigt wird, kann man dies über die Konfiguration anpassen. Dazu gibt es die beiden Parameter x und y.
<a href="http://webmatze.de" onmouseover="XBT(this, {id: 'tt4', x: 50, y: 50})">Man kann den Abstand des Tooltips anpassen...</a>
<div id="tt4" class="xbtooltip">
...indem man eine Konfiguration übergibt
</div>Somit wird der Tooltip nun jeweils 50 Pixel nach rechts und unten verschoben angezeigt.
Man kann den Abstand des Tooltips anpassen...
Funktioniert nicht nur bei Links
Natürlich kann man den Tooltip auch an andere HTML Elemente hängen. Es muss nicht immer ein Link sein.
<div style="position: relative; top: 0px; left: 150px; width: 200px; height: 100px; background-color: #e4e4e4;"
onmouseover="XBT(this, {id:'tt2'})">Das
funktioniert auch mit DIVs statt mit Links...
<div id="tt2" className="xbtooltip">...soweit der Browser onmouseover auf DIV Elementen unterstützt!</div>
</div>Dies würde dann so aussehen:
In absolut positionierten Elementen funktioniert es auch
Mit dem alten Tooltip Script gab es immer Probleme mit Tooltips, die sich in anderen absolut prositionierten Elementen befanden. Hier wurden die Tooltips immer an einer falschen Position angezeigt.
Mit dem neuen Script ist dies nun auch kein Problem mehr:
<div style="position: absolute; top: 0px; left: 300px; width: 200px; height: 100px; background-color: #e4e4e4;">
<a href="http://eventicus.de" onmouseover="XBT(this, {id:'tt3'})">Genauso auch mit Tooltips...</a>
<div id="tt3" class="xbtooltip">...die sich in absolut positionierten Elementen befinden.</div>
</div>Und so sieht's dann aus:
Fazit
Ich hoffe ihr könnt mit diesem neuen Script etwas anfangen und wünsche euch viel Spaß damit. Sollten euch doch noch Probleme auffallen, oder sollte es in einem Browser nicht richtig funktionieren, so könnt ihr mir dies wie immer in den Kommentaren mitteilen.
Ich denke auch das neue Script ist immer noch sehr kompakt und einfach zu verwenden. Vielleicht werde ich in Zukunft noch ein paar Funktionen nachrüsten, sofern ihr noch Wünsche habt, die unbedingt enthalten sein sollten.
Hallo Webmatze,
vielen Dank für das Tooltip-Script!
Ich benutze Grafiken als Tooltip. Bei langen Listen mit vielen Tooltips leideit die Performance beim Laden etwas. Gibt es die Möglichkeit das Bild des Tooltips erst zu laden, wenn der Tooltip erscheint?
Gruß Noni
Hallo Noni,
das wäre möglich, wenn du den Tooltip als text Parameter übergibst:
onmouseover="XBT(this, {text: '<img src=\'http://url.zum/bild.gif\' />', className: 'xbtooltip'})"Dann sollte das Bild erst dann geladen werden, wenn man den Tooltip das erste Mal aufruft.
Sieht zwar etwas komisch aus im Code, sollte aber funktionieren.
Hallo,
ich finde das Script auch super klasse. Ich allerdings auch noch ein kleines Problem: Ich möchte das Script zusammen mit AJAX Requests nutzen, d.h. ich möchte das Tooltip innerhalb einer anderen Funktion aufrufen. Mit der alten Script-Version funktiontioniert das, mit der neuen leider nicht mehr. Woran kann das liegen?
Ablauf ist bei mir so: im onmouseover rufe ich meine eigene Funktion getCustomerDetailsDelayed auf, die wiederum über setTimeout die Funktion getCustomerDetails aufruft, sofern der Timer abgelaufen ist. Dort lade ich per AJAX die Werte in mein Tooltip-Div und möchte dann anschließend das Tooltip anzeigen. Nur leider erscheint gar nix…
Danke, hat funktioniert!
Vielen Dank für das Skript.
Habe allerdings noch folgendes Problem: Sowohl bei Firefox als auch beim Internet Explorer, werden mir nur Tooltips bis zum Bildschirmende angezeigt. Sobald ich jedoch weiter nach unten scrolle, werden mir keine weiteren Tooltips mehr angezeigt.
Über eine Lösung würde ich mich sehr freuen.
Gruß
David
Hallo David, schwer zu sagen woran das liegt. Hast du vielleicht einen Link zur Seite, wo man sich das Problem ansehen kann?
Hallo webmatze,
das Skript ist toll, es funktioniert bei mir fast vollständig.
Wegen „fast“:
1.) Im IE6 (leider muss ich den noch unterstützen) wird das TT immer bis zum rechten Rand des Fensters aufgezogen.
2.) Ein weiterer Versuch mit dem anderen Skript, das das Rauslaufen aus dem Fenster verhindern soll, führt im IE6 immer zu TTs, die sich über die gesamte Breite des Fensters erstrecken, und im aktuellen FF macht er das auch, allerdings nur beim 1. Hover über einen Link. Beim 2. Hover über denselben Link ist es dann wieder korrekt. Einige TT werden im FF allerdings nun gar nicht mehr angezeigt.
Ich würde mich über jede Hilfe freuen. Bei Bedarf kann ich einen Link zu der Seite per Email senden.
Gruß
Bodo
Nachtrag:
Das erste Problem konnte ich lösen (es lag an einem float in dem TT-, jetzt arbeite ich mit konstanter Breite).
Ich würde aber lieber das neue Skript verwenden, die Probleme zu 2. bleiben (in allen Browsern).
Hallo Webmatze, deinen anderen TT (http://webmatze.de/wirklich-einfache-javascript-tooltips/) konnte ich, dank der Funktion „showWMTT“, in einem Google Maps API2 verwenden.
Befehl war:
GEvent.addListener(marker,“mouseover“, function() {showWMTT(‚ttatt01001‘);});
Link zur Seite: http://bertazzi.ch/gmaps/it_punti-regione.php
Mit diesem neuen TT funktioniert es aber nicht mehr :-(
ich habs so versucht:
GEvent.addListener(marker,“mouseover“, function() {XBT(this, {id:’ttatt01001′, x: 0, y: -140})});
Ich würde mich über jede Hilfe freuen
Oreste
Hallo Oreste, das wird schwierig. Das Problem ist, dass der Tooltip seine eigenen EventListener registriert.
Ich kann es jetzt gerade nicht bei mir testen, aber vielleicht ist es möglich, die beiden GEvent.addListener Aufrufe bei dir auszutauschen. also statt:
GEvent.addListener(marker,"mouseover", function() {showWMTT1(tooltip_id);});
GEvent.addListener(marker,"mouseout",function() {hideWMTT1();});
folgendes schreiben:
XBT(marker, {id: tooltip_id, x: 0, y: -140});
Wobei eben statt ‚this‘ der Marker direkt übergeben wird.
Wenn das nicht klappt, muss man wahrscheinlich zusätzlich das Tooltipscript anpassen und statt:
element.onmouseover = over;
element.onmouseout = out;
element.onmousemove = move;
Alles mit GEvent.addListener umsetzen, z.B. so:
GEvent.addListener(element, 'mouseover', over);
GEvent.addListener(element, 'mouseout', out);
GEvent.addListener(element, 'mousemove', move);
Vielleicht kannst du das ja mal bei dir austesten. Vom Prinzip her müsste es aber irgendwie so gehen. :)
Hey das ging aber schnell :-) :-) thx
ich habs geändert:
http://bertazzi.ch/gmaps/it_punti-regione.php
aber funktioniert leider immer noch nicht richtig. So zeigt er nur den letzten definierten Tooltip ständig an.
Hallo Oreste, habe dir eine separate Email mit dem funktionierenden Script geschickt. Also Kommentar wäre das jetzt hier zu lang geworden.
Hallo,
super Script, das auch einwandfrei funktioniert.
Ich habe lediglich im aktuellen FF ein kleines Problem:
Ich benutze das Tooltip für ein Bild, das verlinkt ist. Der Link geht auf die gleiche Seite, es wird dann nur ein Parameter übergeben.
Nun springt das Tooltip beim klicken des Bildes vom Cursor weg nach links unten.
Im IE geht es. Was kann das sein?
Danke für die Hilfe!!!
VG
Martin
moin webmatze.
endlich mal ein tooltipp was bei mir sogar mal fast auf anhieb gleich ging. mega danke dafür aber ich hab ein problem
im IE und FF klappts wunderbar.
google chrome und safari. wenn man auf die seite geht werden meien kleinen bilder alle angezeigt und gleich „daneben bzw. drunter“ die großen bilder
ich muss erst einaml mit der maus über das kleine bild dann geht das große weg. beim 2. mouseover zeigt der mir dann den tooltipp an.
und da dann ohne meinen farblichen rahmen. einfach transparent. blöd weil ich über den bild und unter dem bild noch text eingebaut habe.
weisst du da nen ansatz was ich machen könnte?
Bitte am besten immer eine Beispielseite als Link hinzufügen, damit man das Problem besser nachvollziehen kann.
Ich habe leider nicht immer die Zeit, mir alles auf Grund der Beschreibung nachzubauen und zu testen. ;)
Danke für Euer Verständnis.
jau verständlich,
und ich kann nur sagen das es nun komischer weise geht. lustige story.
ich hab mal das display:none kurzzeitig gelöscht und wieder reingeschrieben und hochgeladen dann gings…. also wars eher was auch immer fürn fehler.
nix in deinen geilen tool.
ich hab jetzt noch nich alles hier durchgelesen an fragen, aber ich müsste nur noch rausfinden wie ich die tooltipp bilder über den flashplayer legen kann – doch irgendwas sicher mit den z-index zeugs oder?
und zweite frage? wenn ein bild größer ist als der browser nach unten geht verlängert der ja den browser. nur scrollen kann ich nich da dann dsa bild gleich wieder weg ist ja.
kann ich irgendwie dann sagen rück die position einfach vertikal nach oben ?
Hi Matze, geile Meile ;-)
ich verstehe den code so gut wie gar nicht, konnte aber trotdzem formatierte ToolTips bauen.
Ich habe mir ein paar Buttons gebaut, die über onmouseover und onmouseout aktive und inaktive Grafiken anzeigen sollen.
Beispiel:
[Wurde von entfernt]
Der onmouseover-effekt zum Austauschen der (inaktiven) Grafik wird noch ausgeführt, allerdings wird onmouseout nicht ausgeführt. Die Grafik bleibt also im aktiven Zustand und wird nur einmal von inaktiv auf aktiv gesetzt.
Hast Du da vielleicht einen Tip?
LG, der tim
Hallo Tim,
dein Beispiel wurde leider von meiner SPAM Software entfernt. Kannst du mir den sonst noch mal per Email schicken? Dann kann ich mir das mal genauer ansehen.
Vielleicht auch mit Link zur Beispielseite, wenn das möglich ist.
LG Mathias
doofe frage, aber wo fügt man das Javascript ein? ganz normal als tt1.js hochladen oder wie?
lg
Das war genau das, was ich gesucht habe. Funktioniert perfekt. Danke!
Hallo,
Es werden durch XBT Bilder angezeigt, die als Textparameter übergeben werden.
Im IE und Chrome erscheint bei fehlenden Bild ein Platzhalter.
Bisher habe ich noch keine Lösung (weder AJAX noch OnError) um im Vorfeld eine Anzeige zu unterbinden wenn das Bild fehlt. Wäre dankbar für einen Lösungsansatz.
Wenn man das Script anpasst, könnte man solche Fehler abfangen.
Ich habe das Beispielhaft mal hier gemacht:
http://jsfiddle.net/webmatze/kb6pg/8/
Es wird dort ein document.body.addEventListener(‚error‘, …) eingebaut, welcher bei dem Bild, von dem der Fehler ausgeht, display=’none‘ setzt, so dass dieses nicht mehr angezeigt wird.
Das Beispiel müsste jedoch auch noch für den IE angepasst werden, welcher z.B. kein addEventListener versteht.
Außerdem müsste man testen, ob es sich wirklich um das IMG Tag handelt, von dem der Fehler ausgeht.
Es funktioniert, vielen Dank für die schnelle Hilfe.
nochmals Danke !
Hallo Webmatze,
Super Tool!
Kannst du nicht noch einen Parameter einbauen, der ein delay bis zum aufpoppen des tooltips einstellt? Es ist ja zur Zeit so, dass die Tooltips sofort aufpoppen.
Wenn man zb mehrere Tooltips (zb Navigation, thumbs) nutzt, dann poppen bei jedem kurzen mouseover immer die tooltips auf. Mit einem delay könnte man dies steuern.
THX WG
hey danke! das script klappt sehr gut!
Hallo, klasse script welches ich bereits längere Zeit nutze. Meine Frage: Ist es möglich den Tooltip auch mit der Tastatur zugänglich zu machen? Ich hatte erfolglos versucht ein onfocus zum laufen zu kriegen weil ich gern auch Leuten die per Tastatur navigieren alle Informationen geben möchte.
Hi ho,
habe mich heute erstmalig mit Tooltip-Lösungen beschäftigt. Dazu kommt noch keine Ahnung von JS. Hatte heute einige Scriptschnipsel ausprobiert, aber der hier schlägt alle. Sehr gut auch die mögliche Parameterübergabe! macht das ganze sehr flexibel.
Ich habs zunächst als „Doku“ für meine Wetterdaten-Statistik-Kennzahlen in eine mittlerweile 2000px hohe „Wetter-Tapete“ eingebaut. Bin sehr zufrieden mit der Lösung.
Eine Frage hätte ich (ich hoffe, ich hab nichts überlesen): gibt es eine Möglichkeit, einen Tooltip bei Bedarf per Parameter an einer definierten Stelle der Webseite festzutackern?
Hintergrund: ich überlege, die Tooltips auch für die Darstellung interaktiver Charts zu nutzen, da müsste man mit der Maus drin hantieren….
Hallo, auf meiner eigenen Seite mit nzähligen Hörbüchern habe ich den xbt tooltip verwendet um infos zu dem jeweiligen hörbuch inkl. cover anzeigen zu lassen. Dazu verwende ich die id methode:
{{Ake.Edwardson.-.Das.vertauschte.Gesicht/info.html}}
In dem div befindet sich ein pfad via php wird an dieser stelle die info.html des jeweiligen hörbuchs einfügt.
Die ladezeit der seite is mittlerweile doch sehr lang daher meine frage ob nicht eine möglichkeit besteht direkt diese info.html als tooltip ansprechen zu können.
Das obige Bsp. mit dem ‚text:<img src' hat bei einer anderen seite hervorragend die ladezeiten reduziert aber eine html habe ich nicht hinbekommen zu übergeben.
Hallo, ich glaub ich hatte mich sehr umständlich formuliert daher mach ich es noch einmal: Ist es möglich, ähnlich wie bei der Angabe eines Bildes direkt hinter text:<img…, auch z.B. eine html anzugeben damit nicht alle zig infodateien beim Aufrufen der Seite geladen werden müssen sondern erst beim hovern?
Das script ist wirklich grosse Klasse und was meine kleinen Projekte betrifft auch sehr gut individualisierbar.
laut dreamweaver ist im script-code ein syntaxfehler in zeile 3…es läuftr auch nicht wie versprochen…kenn mich mit js leider net aus um den fehler zu beheben zu können…
Hallo Webmatze, das Skript ist super, keine Frage. Ich „breche“ mir allerdings derzeit die Finger bei dem Versuch, die Tooltipps nur verzögert aufzurufen, wenn die Maus mindestens x Millisekunden über dem Hover-Element ist.
Hast Du dafür eine Idee? Meine bisherigen Versuche mit setTimeout() haben noch nicht so wirklich funktioniert.
Könntest Du da helfen, bitte?
Liebe Grüsse von
Wuppi
Webmatze & Wuppi herzlichen Dank. Die Kombination funktioniert super. Leider nur im Google Chrome & Firefox. Der Internet Explorer zeigt die Objekte nur in der alternativen Richtung an.
Ich habe schon einiges ausprobiert, bekomme es aber nicht hin, an was es liegt das IE die Alternativen nicht checkt. Habt Ihr eine Lösung?
Servus Ralf
Hallo Webmatze, hier ein – zugegeben kleiner – Verbesserungsvorschlag von mir:
Derzeit wird der Tooltipp eventuell unterhalb des sichtbaren Bereiches eingeblendet, wenn das zu hovernde Objekt zu weit unten steht.
Wenn mann die Zeile
tooltip.style.top = (event.pageY+config.y) + „px“;
ändert in ….
if (tooltip.offsetHeight + event.pageY+config.y < document.documentElement.clientHeight)
tooltip.style.top = (event.pageY+config.y) + "px";
else
tooltip.style.top = (event.pageY-config.y-tooltip.offsetHeight) + "px";
dann wird der Tooltipp evt. oberhalb angezeigt, wenn er unterhalb nicht mehr passen würde.
Viele Grüße von Wuppi
Hi,
vielen Dank für das tolle Script.
Ich habe es erfolgreich in eine Seite integrieren können.
Nun habe ich 2 Probleme bzw. Fragen:
Kann ich den Tooltip so konfigurieren, das er immer direkt mittig unter der Maus erscheint?
Meine
Seite arbeitet mit PHP und AJAX. Beim schnellen durchklicken passiert
es dann unregelmäßig, das ein Tooltip nicht wieder ausgeblendet wird,
sondern die ganze Zeit stehen bleibt.
Gibt es da irgendeinen Trick oder eine Funktion, wie ich das beheben kann?
Danke im Voraus
Hallo Webmatze,
jetzt, nach über 10 Jahren seit Posting, habe ich dein Script gelesen.
Und es hat genau meine Anforderungen getroffen. Und es funktioniert noch immer. Hatte schon angefangen ein eigenes Script zu schreiben, aber man muss das Rad nicht zweimal erfinden.
Vanilla-Javascript wird oft belächelt, zu Unrecht! Es sollte hoffentlich noch sehr lange laufen.
Vielen Dank dafür!!!
Ich entwickle eine Finanzverwaltung in PHP und kann dir leider den Link zur Website nicht schicken, aber auch das läuft in fast jedem Tag (hier Tabelle):
.“WKN | ISIN“
Über class=’tooltip‘ steuere ich das Aussehen von WKN | ISIN (CSS underline etc.), in der Ausgabeseite sind ganz unten innerhalb des body-Tags die Tooltips definiert:
Die Wertpapierkennnummer (z.B. 710000), ISIN oder das Ticker Symbol (z.B. DCX)
Hilft vielleicht anderen, die dein Script benutzen.
Viele Grüße und Danke
Matthias
Hi Webmatze,
Danke für diesen tollen und ausführlichen Code, das hat mir sehr geholfen!
Gibt es auch eine Möglichkeit den Tooltip nicht am Button zu platzieren sondern irgendwo auf der Seite?
Ich stelle mir das so vor, man hat einige Buttons und beim hover wird an einer bestimmten Stelle der Seite, der Tooltip-Text zum Button angezeigt.
Grüße Dave
Hi Dave, schön das dir das Script gefällt. Es wäre schon möglich, den Tooltip an einer festen Stelle anzeigen zu lassen. Dazu müsste man aber den Code so anpassen, dass die Position nicht abhängig von der Mausposition angepasst wird.
Allerdings würde ich hier fast vorschlagen, lieber auf das Script zu verzichten und das mit CSS und :hover umzusetzen. Dann kannst du per CSS die Position des Tooltips genau anpassen.