Position des jquery-Elements relativ zum Mauszeiger

Question

Wie kann ich diesen Codeblock dazu bringen, die Position des Tooltip-Elements innerhalb der Browser-Ränder und Popup in anderer Richtung festzulegen, wenn nicht genügend Platz vorhanden ist, um es an der aktuellen Position anzuzeigen.

var etichetaSpan = 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'; 
}; 

Answer 1

Hier ist eine funktionierende Geige für links und rechts. Aber Sie können die gleiche Technik für oben/unten anwenden.

Ich berechne die maximale Position links Wert möglich durch Abrufen der Dokumentbreite und Subtrahieren der Breite des Tooltips, um die Variable max_value zu erhalten.

Werfen Sie einen Blick hier:

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

 
var width = document.body.clientWidth; 
 
var tooltip_width = etichetaSpan.clientWidth; 
 
var max_value = width - tooltip_width; 
 

 
window.addEventListener('resize', function(){ 
 
\t width = document.body.clientWidth; 
 
    max_value = width - tooltip_width; 
 
}); 
 

 
window.onmousemove = function (e) { 
 
    var x = e.clientX, 
 
    y = e.clientY; 
 
    etichetaSpan.style.top = (y + 20) + 'px'; 
 
    if(x + 20 < max_value){ 
 
    \t etichetaSpan.style.left = (x + 20) + 'px'; 
 
    } else { 
 
    \t etichetaSpan.style.left = (x - (20 + tooltip_width)) + 'px'; 
 
    } 
 
};

#tooltip-span{ 
 
    position:absolute; 
 
}

<span id="tooltip-span">Tooltip!</span>