Пользовательская подсказка за место стандартного title

Web Frontend: JavaScript, HTML/CSS
#1

Здравствуйте!
Помогите разобраться с реализацией своей подсказки со своими стилями и что бы подсказка была на протяжении всего времени пока мышка находится на объекте к которому принадлежит подсказка. Код реализации нашел на просторах могучего интернета. И после установки на свою страницу и тестирования обнаружил такую проблему что когда делается прокрутка страницы подсказка уезжает от курсора мышки хотя она должна располагаться рядом с курсором независимо от места расположения самого объекта.
Код сделал самый простой при прокрутки и наводя страницы и наводя мышкой на ссылку видно как подсказка уезжает вверх

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
$('.hover').mousemove(function(e){
$('#hint').css({'left': e.clientX, 'top': e.clientY});
$('#hint').text(e.clientX + ' X ' + e.clientY);
$('#hint').show();
});
});
</script>
<style>
html,body{
width:100%;
height:100%;
}
#hint{
display:none;
position:absolute;
border:1px solid #ccc;
padding:5px;
background:yellow;
border-radius:5px;
}
</style>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="hint"></div>
<a class="hover" rel="Просто ссылка" href="#">Link</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test

Как сделать так что бы подсказка всегда была рядом с мышкой и не убегала от заданных параметров? И почему вообще подсказка уползает от курсора?

#2

https://jsfiddle.net/odmcq162/

#3

Надо page, а не client координаты.

$('#hint').css({'left': e.pageX, 'top': e.pageY});

А вообще лучше библиотеку какую-нибудь взять.
https://atomiks.github.io/tippyjs/#follow-cursor

#4

К сожалению page не помог результат остался тот же. Попробовал протестировать библиотеку, которую предложили Вы и увы тот же результат всё в общем сбивается.

И вот нашел вот такой вариант Tooltip | jQuery UI и тут всё более стабильно работает

#5

Это как?
https://jsfiddle.net/AlexP11223/wh6gy97t/

1 лайк
#6

Прощу прощения сменил client на page, но только не сменил для css. Моя не внимательность

#7

Радость моя была не долгой с этой подсказкой. Внедрил на свою страничку подсказку и получилось, что проблема осталась. При прокрутке подсказка всё равно убегала. Решением было простым и оказалось на самой поверхности, а именно в css. Я заменил position: absolute на position: fixed и сразу всё стало на свои места.