Javascript Css Tooltip who to Fix position 当页面结束时

Question

您好，我有用于 CSS 工具提示的休闲脚本和 html 代码。问题是工具提示跨度部分在页面结束时下降。如果页面结束，如何将位置更改为顶部

Javascript:

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

样式:

.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部分

<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

您可以运行 if 语句来检查鼠标位置与页面末尾的距离，然后反转显示工具提示的位置。下面我正在检查鼠标光标是否在页面末尾的 100 像素范围内。

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