Бывает, что в тексте статьи необходимо сделать всплывающую подсказку по клику на слово или картинку. Вот один из способов, как можно реализовать данную функцию.
Итак, сделаем ссылку блок с информацией, которая будет выводиться во всплывающей подсказке.

<!-- Ссылка -->
<a href="javascript:;" id="link">Симфония</a> 

<!-- Блок -->
<div class="hide show" id="block">
  <b>Симфония</b> — музыкальное произведение для оркестра. Как правило, симфонии пишутся для большого оркестра смешанного состава (симфонического), но существуют и симфонии для струнного, камерного, духового и других оркестров; в симфонию могут вводиться хор и сольные вокальные голоса.
</div>

Оформим:

.hide {
  display: none;
}

.show {
  padding: 5px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: #ccc 0 0 10px;
  border-radius: 5px;
  width: 320px;		    
}

a {
  text-decoration: none; /* Убираем подчеркивание */
  border-bottom: 1px dashed #000080; /* Добавляем свою линию */ 		    
}

Класс show – оформление блока. Если этому блоку добавить класс hide то он будет скрыт.
Теперь сам скрипт:

$(document).ready(function() {	
  $('#link').click(function() {viewTooltip(this, $('#block'));}); //показываем или скрываем блок
  $('#block').click(function() {$($('#block')).fadeOut('fast');}); //скрываем блок, при клике по нему
});

//Показывает всплывающую подсказку
//elem - элемент для которого подсказка
//block - блок подсказки
function viewTooltip(elem, block)
{
  $elTop = $(elem).height(); // высота строки (ссылки)
  $elLeft = 0;
  $(elem).css({'outline': 'none'});
  $(block).css({'position': 'absolute',
                'top': (elem.offsetTop + $elTop) + 'px',
                'left': (elem.offsetLeft + $elLeft) + 'px'
  });
  if($(block).is(':visible')) $(block).fadeOut('fast');
  else $(block).fadeIn('fast');
  elem.focus();
}

При клике по ссылке вызывается функция viewTooltip(). Вычисляются координаты ссылки и блок позиционируется под ссылкой: elem.offsetTop – координаты ссылки от верхней части экрана, elem.offsetLeft – координаты ссылки от левой стороны ссылки. Т.к. мы хотим чтобы блок выводился под ссылкой, надо прибавить elem.offsetTop размер строки (ссылки): (elem.offsetTop + $elTop) + ‘px’.

Вот что у нас получилось DEMO

Пример полностью:

	
	
		
		
 
		
 
	
 
	
		
		Симфония 
 
			
		

			Симфония — музыкальное произведение для оркестра. Как правило, симфонии пишутся для большого оркестра смешанного состава (симфонического), но существуют и симфонии для струнного, камерного, духового и других оркестров; в симфонию могут вводиться хор и сольные вокальные голоса.