HTML-Tooltip-Position relativ zum Mauszeiger

Lesezeit: 6 Minuten

Benutzer-Avatar
Ben

So richten Sie den Tooltip im natürlichen Stil aus: rechts unten am Mauszeiger?

<!DOCTYPE html>
<html>
<head>
  <title>Tooltip with Image</title>
  <meta charset="UTF-8">
  <style type="text/css">
    .tooltip {
        text-decoration:none;
        position:relative;
    }
     .tooltip span {
        display:none;
    }
     .tooltip span img {
        float:left;
    }
     .tooltip:hover span {
        display:block;
        position:absolute;
        overflow:hidden;
    }
  </style>
</head>
<body>
  <a class="tooltip" href="http://www.google.com/">
    Google
    <span>
      <img alt="" src="http://www.google.com/images/srpr/logo4w.png">
    </span>
  </a>
</body>
</html>

  • Benutzt du jquery? Oder nur CSS/Javascript? Müssen Sie dem Mauszeiger folgen, wenn Sie über das Element schweben, oder nur einmal den Tooltip an einer Position anzeigen, wenn Sie das erste Mal über das Objekt schweben?

    – Stefan V

    29. März 2013 um 12:17 Uhr

  • Kein jQuery, kein JavaScript, nur CSS. Ich brauche kein Folgen, ich möchte nur das allgemeine Tooltip-Verhalten.

    – Ben

    29. März 2013 um 12:28 Uhr


Benutzer-Avatar
Daniel Ims

Für das standardmäßige Tooltip-Verhalten fügen Sie einfach die title Attribut. Dies kann jedoch keine Bilder enthalten.

<div title="regular tooltip">Hover me</div>

Bevor Sie die Frage geklärt haben, habe ich dies in reinem JavaScript gemacht, ich hoffe, Sie finden es nützlich. Das Bild erscheint und folgt der Maus.

jsFiddle

JavaScript

var tooltipSpan = document.getElementById('tooltip-span');

window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
};

CSS

.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

Verlängerung für mehrere Elemente

Eine Lösung für mehrere Elemente besteht darin, alle QuickInfos zu aktualisieren span‘s und setzt sie bei Mausbewegung unter den Cursor.

jsFiddle

var tooltips = document.querySelectorAll('.tooltip span');

window.onmousemove = function (e) {
    var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';
    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};

  • Vielen Dank! Aber ich brauche Bilder in Tooltips, das ist der Punkt. Und ich möchte kein JavaScript verwenden. Nochmals danke trotzdem.

    – Ben

    29. März 2013 um 12:35 Uhr


  • Ohne JavaScript kann man der Maus leider nicht folgen. Das Beste, was Sie tun können, ist die Anzeige wie in Ihrem Beispiel. Gibt es einen Grund für kein JavaScript?

    – Daniel Imms

    29. März 2013 um 12:36 Uhr


  • Wie oben erwähnt, brauche ich keine folgenden.

    – Ben

    29. März 2013 um 12:39 Uhr

  • Sie brauchen es, wenn Sie diese Funktionalität wollen 🙂 buchstäblich jeder Browser hat es heutzutage eingeschaltet.

    – Daniel Imms

    29. März 2013 um 12:41 Uhr

  • Hinzufügen Überleitung dazu und alles ist perfekt 🙂

    – Huy Le

    12. März 2017 um 7:26 Uhr

Benutzer-Avatar
Anthony Cregan

Eine Möglichkeit, dies ohne JS zu tun, besteht darin, die Hover-Aktion zu verwenden, um ein HTML-Element anzuzeigen, das ansonsten verborgen ist, siehe diesen Codepen:

http://codepen.io/c0un7z3r0/pen/LZWXEw

Beachten Sie, dass die Spanne, die den Tooltip-Inhalt enthält, relativ zur übergeordneten li ist. Die Magie ist hier:

ul#list_of_thrones li > span{
  display:none;
}
ul#list_of_thrones li:hover > span{
  position: absolute;
  display:block;
  ...
}

Wie Sie sehen können, ist die Spanne ausgeblendet, es sei denn, Sie bewegen den Mauszeiger über das Listenelement, wodurch das Span-Element sichtbar wird. Die Spanne kann so viel HTML enthalten, wie Sie benötigen. Im beigefügten Codepen habe ich auch ein :after-Element für den Pfeil verwendet, aber das ist natürlich völlig optional und wurde in diesem Beispiel nur aus kosmetischen Gründen eingefügt.

Ich hoffe, das hilft, ich fühlte mich gezwungen zu posten, da alle anderen Antworten JS-Lösungen enthielten, aber das OP bat um eine reine HTML/CSS-Lösung.

  • Dies ist nicht relativ zur Position des Mauszeigers. Es ist relativ zum DOM-Element.

    – CrazySabbath

    25. September 2017 um 9:01 Uhr

  • Mein Beispiel ist relativ zum schwebenden Element, nicht zum Zeiger. Entweder wurde die Frage aktualisiert oder ich habe sie missverstanden, so oder so sind die angegebenen JS-Beispiele die richtige Lösung, das geht nicht mit CSS allein. Ich habe meine Stimme an anderer Stelle zu dieser Frage entsprechend abgegeben.

    – Anthony Cregan

    25. September 2017 um 20:57 Uhr


  • Nicht krass sein, aber ich sehe nicht, was da missverstanden werden soll, der Titel lautet „.. relativ zum Mauszeiger“.

    – CrazySabbath

    26. September 2017 um 6:33 Uhr

  • Um nicht unverblümt zu sein, aber wenn Sie die anderen Beiträge lesen, werden Sie feststellen, dass diese Frage stark aktualisiert und erweitert wurde. Die Frage war nicht klar, als ich meine Antwort veröffentlichte. Die Frage wurde seitdem erweitert und geklärt. Ich habe die Antwort nicht gelöscht, da sie darauf hinweist, dass JS erforderlich ist, um den erforderlichen Effekt zu erzielen, und wenn eine reine HTML/CSS-Lösung erforderlich ist, ist dies die nächste, die Sie ohne die Verwendung von JS erhalten.

    – Anthony Cregan

    27. September 2017 um 10:57 Uhr

  • Dies ist eine großartige Lösung für jemanden, der nur HTML/CSS haben möchte und DOM-Elemente hat, die klein genug sind, dass der Tooltip ziemlich genau dort erscheint, wo sich der Mauszeiger befindet. In meinem Fall “Hilfe”-Symbole, die beim Hovern reichhaltigere Inhalte anzeigen, als das Titelattribut unterstützt. +1

    – bigdogwillfeed

    16. November 2017 um 2:06 Uhr

Benutzer-Avatar
Atul Bhosale

Sie können das jQuery-UI-Plug-in verwenden, im Folgenden finden Sie Referenz-URLs

Setzen Sie track auf TRUE für Tooltip-Position relativ zum Mauszeiger, z.

$('.tooltip').tooltip({ track: true });

  • Dies ist nicht relativ zur Position des Mauszeigers. Es ist relativ zum DOM-Element.

    – CrazySabbath

    25. September 2017 um 9:01 Uhr

  • Mein Beispiel ist relativ zum schwebenden Element, nicht zum Zeiger. Entweder wurde die Frage aktualisiert oder ich habe sie missverstanden, so oder so sind die angegebenen JS-Beispiele die richtige Lösung, das geht nicht mit CSS allein. Ich habe meine Stimme an anderer Stelle zu dieser Frage entsprechend abgegeben.

    – Anthony Cregan

    25. September 2017 um 20:57 Uhr


  • Nicht krass sein, aber ich sehe nicht, was da missverstanden werden soll, der Titel lautet „.. relativ zum Mauszeiger“.

    – CrazySabbath

    26. September 2017 um 6:33 Uhr

  • Um nicht unverblümt zu sein, aber wenn Sie die anderen Beiträge lesen, werden Sie feststellen, dass diese Frage stark aktualisiert und erweitert wurde. Die Frage war nicht klar, als ich meine Antwort veröffentlichte. Die Frage wurde seitdem erweitert und geklärt. Ich habe die Antwort nicht gelöscht, da sie darauf hinweist, dass JS erforderlich ist, um den erforderlichen Effekt zu erzielen, und wenn eine reine HTML/CSS-Lösung erforderlich ist, ist dies die nächste, die Sie ohne die Verwendung von JS erhalten.

    – Anthony Cregan

    27. September 2017 um 10:57 Uhr

  • Dies ist eine großartige Lösung für jemanden, der nur HTML/CSS haben möchte und DOM-Elemente hat, die klein genug sind, dass der Tooltip ziemlich genau dort erscheint, wo sich der Mauszeiger befindet. In meinem Fall “Hilfe”-Symbole, die beim Hovern reichhaltigere Inhalte anzeigen, als das Titelattribut unterstützt. +1

    – bigdogwillfeed

    16. November 2017 um 2:06 Uhr

Benutzer-Avatar
Hochbetrieb im August

Das Gleiche können wir mit “Directive” in Angularjs erreichen.

            //Bind mousemove event to the element which will show tooltip
            $("#tooltip").mousemove(function(e) {
                //find X & Y coodrinates
                x = e.clientX,
                y = e.clientY;

                //Set tooltip position according to mouse position
                tooltipSpan.style.top = (y + 20) + 'px';
                tooltipSpan.style.left = (x + 20) + 'px';
            });

Sie können diesen Beitrag für weitere Details überprüfen.
http://www.ufthelp.com/2014/12/Tooltip-Directive-AngularJS.html

1006040cookie-checkHTML-Tooltip-Position relativ zum Mauszeiger

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy