На текущий момент довольно много материалов посвящено данной теме, однако не все реализации работают в принципе, а некоторые со временем потеряли актуальность из-за большого количества лишнего кода и с выходом новых библиотек.

Ниже я подробно опишу реализацию того варианта, который когда-то искал, но в полной мере так найти и не смог. Возможно, это окажется тем, что искали Вы.

Вообще, наиболее простым решением было бы изучить 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. Там всё делается в одну строчку. Но положение подсказки не будет изменяться при движении мыши. Она будет либо появляться, либо исчезать.