Янковиц,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.screentip{
position: relative; /* позиционируем */
display: inline-block;
background: #eaeaea;
color: #232323;
text-decoration: none;
cursor: help;
outline: none;
}
.screentip span{
position: absolute; /* позиционируем */
z-index: 999; /* выдвигаем на передний план */
visibility: hidden; /* временно скрываем */
left: -50px;
}
.screentip:hover{
border: 0; /* используем если необходим IE6 fix */
position:relative;
z-index: 9999;
}
.screentip:hover span{
visibility: visible; /* отображаем подсказку */
}
p{
height: 1000px;
width: 1000px;
}
</style>
<script>
window.addEventListener('mouseover', function(e) {
var el = e.target;
if(!el.classList.contains("screentip")) return;
var span = el.querySelector("span");
var pos = el.getBoundingClientRect();
var left = 12;
var maxLeft = pos.left + 12 + span.offsetWidth;
var width = document.documentElement.clientWidth
if(maxLeft > width) left = width - maxLeft;
if(pos.left < 0) left = -pos.left + 6;
var top = el.offsetHeight + 12;
var maxTop = pos.top + span.offsetHeight + el.offsetHeight + 12;
var height = document.documentElement.clientHeight
if (maxTop > height) top = - span.offsetHeight - 6
span.style.left = left +"px";
span.style.top = top +"px";
}, false);
</script>
</head>
<body>
<p></p>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<p></p>
</body>
</html>