HTML-Tooltip-Position relativ zum Mauszeiger

Question 1

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>

Question 2

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;
    }
};

Question 3

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.

Question 4

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 });

Question 5

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