Kommentare zu: Ein einfacher Cross-Browser Tooltip mit Javascript und CSS

Von: Mathias Karstädt

Mathias Karstädt — Thu, 09 Jun 2022 12:38:19 +0000

Als Antwort auf 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.

Von: Dave

Dave — Fri, 03 Jun 2022 10:34:17 +0000

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

Von: Matthias Fiedler

Matthias Fiedler — Thu, 25 Feb 2021 22:35:05 +0000

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

Von: Roland

Roland — Thu, 07 Nov 2013 21:32:00 +0000

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

Von: Ralf

Ralf — Fri, 14 Jun 2013 07:09:00 +0000

Als Antwort auf 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

Von: Wuppi

Wuppi — Thu, 07 Feb 2013 08:05:00 +0000

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

Von: Wuppi

Wuppi — Thu, 07 Feb 2013 08:00:00 +0000

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

Von: Knud Remsonsen

Knud Remsonsen — Fri, 23 Nov 2012 09:40:00 +0000

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…

Von: Legolas

Legolas — Thu, 06 Sep 2012 01:30:50 +0000

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:

Das script ist wirklich grosse Klasse und was meine kleinen Projekte betrifft auch sehr gut individualisierbar.

Von: Legolas

Legolas — Wed, 18 Jul 2012 18:25:14 +0000

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: