На текущий момент довольно много материалов посвящено данной теме, однако не все реализации работают в принципе, а некоторые со временем потеряли актуальность из-за большого количества лишнего кода и с выходом новых библиотек.
Ниже я подробно опишу реализацию того варианта, который когда-то искал, но в полной мере так найти и не смог. Возможно, это окажется тем, что искали Вы.
Вообще, наиболее простым решением было бы изучить css свойство :hover. Включить дочерний блок в родительский и задать ему display:none. Далее по :hover на родителя, включаем дочернему display:block.
Но в этом случае подсказка будет статичной. Для получения динамичной подсказки, следующей за указателем, сделаем так:
Для начала заглянем в документацию и рассмотрим функцию: $( selector ).hover( handlerIn, handlerOut ). В нашем случае в роли selector - будет класс .tooltip, а в роли handlerIn (событие попадания курсора в область) и handlerOut (событие выхода курсора из области) — две функции, разделенные запятой. В качестве аргументов функций принимается объект-событие (e), который и передаст в тело функции всю необходимую информацию.
CSS:<style> .tip{ position:absolute; background:lightgoldenrodyellow; padding:6px; } .tooltip{ padding:30px; background:rgb(145, 159, 255); } </style>
JavaScript:
<script> $(document).ready(function(){ //ждем завершения загрузки документа $('.tooltip').hover(function(e){ //вешаем на hover класса tooltip обработчики событий в виде 2 функций через запятую var text = $(this).data('tit'); //цепляем значение аттрибута data-tit $('<span class="tip"></span>') //создаем блок всплавающей подсказки .text(text) //записываем в него значение из tit .insertAfter(this) //указываем, куда вставить новый элемент - span (вставляем сразу после нашего div'a) .css({ 'top': (e.offsetY - 30) + 'px', //читаем координаты мышки, приподнимаем блок подсказки на 30px вверх 'left': (e.offsetX + 20) + 'px', //и на 20 вправо 'display':'none' //и скрываем пока что его (необходимо для анимации появления) }) .fadeIn("fast"); //здесь подсказка плавно появляется }, function() { //ВТОРАЯ функция - событие выхода курсора из зоны $('.tip').fadeOut("fast", function(){ $(this).remove()}); //плавно скрываем элемент по display:none, и после окончания анимации удаляем }) .mousemove(function(e) { //ВТОРОЕ СОБЫТИЕ: движение курсора над областью событие mousemove того же класса .tooltip $('.tip').css({ //которое необходимо, чтобы подсказка следовала за курсором 'top': (e.offsetY - 30 ) + 'px', //точно также выцепляем координаты мышки 'left': (e.offsetX + 20) + 'px' //и задаем те же параметры смещения подсказки }); }); }); </script>HTML:
<body style="padding:100px;"> <div data-tit="Подсказка" class="tooltip">Здесь текст</div> <!-- подсказка задается в аттрибуте <b>tit</b> --> </body>
Вот и всё, на свой вкус можете настроить положение подсказки (цифры 20 и 30 в коде) и стили блока. Критичным является параметр position:absolute блока-подсказки .tip
Не забудьте подключить jQuery перед тем, как вставить код.
P.S. И, как обычно, если что-то пошло не так, можете скачать исходный код реализации.
P.P.S. В некоторых случаях при неправильном поведении блока подсказок стоит обернуть блок в <div style="position:relative"></div>
Описанный в статье метод получился довольно громоздким, в основном из-за того, что мы в каждый момент времени учитываем положение курсора, и привязываем подсказку к указателю мыши. Если вам этого не требуется - потренируйтесь с css свойством :hover. Там всё делается в одну строчку. Но положение подсказки не будет изменяться при движении мыши. Она будет либо появляться, либо исчезать.