Javascript Css Tooltip, die Position zu beheben, wenn die Seite endet

Question

Hallo, ich hatte Skript und HTML-Codes für CSS-Tooltip. Das Problem besteht darin, dass der Tooltip-Spannteil bei Seitenende abläuft. Wie kann ich die Position nach oben ändern, wenn Seite

Javascript endet:

<script type='text/javascript'> 
     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; 
      } 
     }; 

    </script> 

Css:

.tooltip { 
    cursor: help; 
    text-decoration: none; 
    position: relative; 
    } 
.tooltip span { 
    display:none; 
} 
.tooltip:hover span { 
    display:block; 
    position:fixed; 
    overflow:hidden; 
} 


    .classic { padding: 0.8em 1em; } 
    * html a:hover { background: transparent; } 
    .classic { 
    z-index:1000; 
    border:1px solid #111; 
    background-color:#221f28; 
    position: fixed; 
    padding:5px 5px 5px 5px; 
    opacity:0.85; 
    font:normal 10px Tahoma,Helvetica,sans-serif; 
    text-align:center; 
    color:#fff; 
    font: 11px arial,sans-serif;  
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; 

    } 
    .tooltip h3,#tooltip div{margin:0;} 

HTML-Teil

<td class='tooltip' style='height:100px;width:140px;margin:0 auto;' > 
    <a class='tooltip' href=''> 
    <img src="http://i45.tinypic.com/2lbmg04.png"><span class='classic'>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/>SomeText<br/></span> 
    </a> 

JSFiddle: https://jsfiddle.net/179uf3od/1/

Answer 1

Sie können eine if-Anweisung ausführen, um zu prüfen, wie nahe die Mausposition am Ende der Seite ist, und umkehren, wo die QuickInfo angezeigt wird. Unten überprüfe ich, ob sich der Mauszeiger innerhalb von 100 Pixeln vom Ende der Seite befindet.

<script> 

var tooltips = document.querySelectorAll('.tooltip span'); 
window.onmousemove = function (e) { 
    var x, y; 

    if(e.clientY > window.innerHeight - 100) { 
     x = (e.clientX - 20); 
     y = (e.clientY - 20);    
    } else { 
     x = (e.clientX + 20); 
     y = (e.clientY + 20);    
    } 

    for (var i = 0; i < tooltips.length; i++) { 
     tooltips[i].style.top = y + 'px'; 
     tooltips[i].style.left = x + 'px'; 
    } 
}; 

</script> 

Answer 2

Wenn ich Sie richtig bin zu verstehen, könnten Sie wahrscheinlich so etwas wie folgt verwenden:

var tooltips = document.querySelectorAll('.tooltip span'), 
    win_height = window.innerHeight; 

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

    for (var i = 0; i < tooltips.length; i++) { 
    var maxY = win_height - tooltips[i].offsetHeight; 
    if((e.clientY + 20) > maxY) y = maxY + 'px'; 

    tooltips[i].style.top = y; 
    tooltips[i].style.left = x; 
    } 
}; 

Was dies tut ist ein Schwellenwert für den Y-Wert Einstellung durch die Fenster Höhe zu nehmen und sie aus der Subtraktion Die QuickInfo-Höhe verhindert, dass der Tooltip am unteren Rand der Seite überläuft.

Um dynamisch die Tooltips Höhe zu bekommen, werden Sie es display: none;-visibility : hidden ändern müssen, sonst wird die Höhe immer Comeback als 0. Und visibility : visible; auf den Stil :hover gesetzt auch.

Hier ist eine fiddle Demonstration dieser Lösung.