webmatze.de

Profi Tipps für einen erfolgreichen Internetauftritt

Wirklich einfache JavaScript Tooltips

| 66 Kommentare

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:

  1. <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:

  1.  
  2. <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:

  1. <!--
  2. .tooltip {
  3. position: absolute;
  4. display: none;
  5. background-color: #FFFFFF;
  6. }
  7. -->

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:

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

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:

  1. document.onmousemove = updateWMTT;
  2.  
  3. function updateWMTT(e) {
  4. if (wmtt != null && wmtt.style.display == 'block') {
  5. x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
  6. y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
  7. wmtt.style.left = (x + 20) + "px";
  8. wmtt.style.top = (y + 20) + "px";
  9. }
  10. }

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:

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

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:

  1. <a onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#">
  2. Unser Link
  3. </a>

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:

  1. <script type="text/javascript">
  2. <!--
  3. wmtt = null;
  4. document.onmousemove = updateWMTT;
  5. function updateWMTT(e) {
  6. if (wmtt != null && wmtt.style.display == 'block') {
  7. x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
  8. y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
  9. wmtt.style.left = (x + 20) + "px";
  10. wmtt.style.top = (y + 20) + "px";
  11. }
  12. }
  13. function showWMTT(id) {
  14. wmtt = document.getElementById(id);
  15. wmtt.style.display = "block";
  16. }
  17. function hideWMTT() {
  18. wmtt.style.display = "none";
  19. }
  20. -->
  21. </script>

Diese Artikel könnten dich auch interessieren:

  • Felix

    super sache.! vielen dank :) klapt alles wunder bar.
    hab aber noch 2 frage währe sehr froh um antwort.!
    ersten also ich hab das mit einem bild gemacht das ein bild erscheint wen ich mit der maus über den text gehe was auch gut klapt, wie kann ich das erscheinende bild positioieren? kommt immoment direkt hinter dem text würde es gerne vorne dran haben. und noch was wen das möglich ist das bild ist ein png bild mit transparentem hintergrund. wen ich es aber so einfüge wird der hintergrund des bildes automatisch weiß, wie kann ich ihn weiterhin transparent behalten?.
    Vielen dank schonmal.

  • Hansson, J.

    Funzt prima. Sogar bei einem Stümper wie mir. DankE.

  • Martin

    Hei,
    erst mal Danke für den tollen Tooltip.

    Ich habe bei mir Verweise in Fließtext integriert. Steht hier der Link zu weit rechts oder links, dann verschwindet ein Teil des Tips ausserhalb des sichtbaren Bereichs. Gibt es eine Möglichkeit den Tip ab Mitte des frames einmal links und einmal rechts der Mausposition anzeigen zu lassen?

    Vielen Dank schon mal.

    Martin

  • Nino

    Huhu,
    nettes Skript. :)

    Kleine Anmerkung: Man sollte generell keine IDs, Funktionen, Variablen etc. mit Zahlen/Sonderzeichen beginnen.

    Ansonsten tolles Teil ;)

    Liebe Grüße,
    Nino

  • http://webmatze.de webmatze

    @Nino: Da hast du natürlich Recht. Sollte man besser nicht machen. Es gibt übrigens eine neue Version des Scriptes. Dort sind dann auch keine Zahlen als IDs verwendet worden. ;)

  • salvaracer

    im Internetexplorer macht der Faxen :S

  • richi2

    Schönes Script! Das klappt auch überall, nur im chome will das bei mir nicht :/

  • Christian

    Hallo webmatze,

    danke für deine Veröffentlichung, tolles tool.
    Bei mir ist allerdings noch ein Problem (IE und Firefox). Der IE moniert die Zeile:

    x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft – wmtt.offsetParent.offsetLeft;

    als Fehler. Der Hinweis lautet: ‚pageX‘ ist Null oder kein Objekt.
    Wenn ich dann mit dem Mauszeiger über den Link gehe, wird im oberen Bereich der Homepage eine kleine Verschiebung vorgenommen, mein Infotext aber trotzdem angezeigt.

    Hast du diesen Fehler schon mal „erleben dürfen“ bzw. ist dir hierzu etwas bekannt.

    Wäre schon von dir zu hören – vielen Dank im voraus.

    • http://webmatze.de webmatze

      Kannst du mir sagen, welche IE Version du verwendest? Älter als IE 9 oder jünger?

      Sonst versuche die Zeile mal so zu schreiben:

      x = ('pageX' in e ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft – wmtt.offsetParent.offsetLeft;