Всплывающие подсказки на jquery

Для всплывающих подсказок на jquery не обязательно устанавливать плагины. Можно воспользоваться заготовкой, а затем подстроить скрипты и стили под свои нужды. Изначально jquery скрипты настроены для всплытия подсказок при клике на определенный текст, но можно переделать показ при наведении курсора. Рассмотрим первый вариант.

Перейдём к реализации. Для этого потребуется проделать следующие шаги:

• подключить jquery библиотеку;
• подключить скрипты, отвечающие за всплытие;
• прописать оформительские стили;
• создать в коде страницы всплывающие окна;
• создать элементы, при клике по которым будут показываться подсказки.

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

<script type="text/javascript">
	$(function () {
	  $('.real-show-hint').on("click", function(e){ 
	  	e = e || window.event; 
	  	e.preventDefault();
	  	var ypos = $(this).offset().top+24;
	  	var xpos = $(this).offset().left;
	  	var RealHint =  $(this).data('hint');
	  	$(RealHint).css('top',ypos);
	  	$(RealHint).css('left',xpos);
	  	$(RealHint).toggle('fast'); 
	  	return; 
	  	});

	  $('.prm-cross').on('click', function(){ 
	  	$(this).parent().hide('fast'); 
	  	return false; 
	  });

	  document.onclick = function(e){ 
	  	if ($(e.target).hasClass('real-hint')==false) 
	  	$('.real-hint').hide('fast');
	  	return;
	  }
	});
</script>

Обращу внимание на первую строку $('.real-show-hint').on("click", function(e){. Эта функция отвечает за событие, которое приведёт к всплытию подсказки. Если заменить "click" на "mouseover mouseout", то подсказки будут появляться при наведении мыши, а не клике.

Теперь подключаем оформительские стили. Изменяя их, можно добиться нужного внешнего вида окон.

<style type="text/css">
	.real-hint {
	  background-color: #fff;
	  border: 1px solid #aaa;
	  border-radius: 10px;
	  display: none;
	  padding: 5px 10px;
	  position: absolute;
	  width: 250px;
	  z-index: 99;
	}

	.real-hint .hint-caption {
		font-weight: bold;
		text-transform: uppercase;
	}

	.real-hint .prm-cross {
		background: url("/images/cross.jpg") no-repeat scroll right top rgba(0, 0, 0, 0);
		cursor: pointer;
		float: right;
		height: 16px;
		margin-top: 3px;
		padding-left: 15px;
		right: 10px;
		width: 16px;
	}

	.real-show-hint {
		cursor: pointer;
		border-bottom: dashed 1px;
		color: #8c0000;
	}
</style>

В строке background: url("/images/cross.jpg") указывается путь к изображению крестика, используемого для закрытия всплывающей подсказки. Не забудьте загрузить это изображение на сайт и указать правильный путь. Вот иконка:

Создаём окна с подсказками. По умолчанию они будут скрытыми (за это отвечают стили). Размещать их лучше после открывающегося тега «body» или перед закрывающимся. Если разместить где-то в другом месте, то координаты всплывающего окна могут рассчитаться неправильно. Это зависит от вёрстки. На некотрых сайтах может быть всё в порядке, а на некоторых — нет.

<div id="real-hint-1" class="real-hint">
	<div class="prm-cross"></div>
	<span class="hint-caption">Подсказка 1.</span><br/>
	Вы нажали на первую ссылку
</div>

<div id="real-hint-2" class="real-hint">
	<div class="prm-cross"></div>
	<span class="hint-caption">Подсказка 2.</span><br/>
	Вы нажали на вторую ссылку
</div>

Подсказок может быть сколько угодно. Основные требования, это class="real-hint" и id="real-hint-2". Идентификатор у каждой подсказки должен быть уникальным, именно его мы будем указывать в аттрибутах элемента при клике на который будет осуществлено всплытие.

<span class="real-show-hint" data-hint="#real-hint-1" >Ссылка на подсказку 1</span>
<span class="real-show-hint" data-hint="#real-hint-2" >Ссылка на подсказку 2</span>

А вот и сами элементы, при нажатии на которые будет показываться то или иное окно. Элементами могут выступать любые теги, главное прописать для них класс и аттрибут, указывающий на идентификатор подсказки, которую следует показать: class="real-show-hint" data-hint="#real-hint-1". Решётка перед идентификатором подсказки обязательна.

Jquery подсказка, появляющаяся при наведеннии мыши

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

Наведи курсор 1 Наведи курсор 2

В код страницы добавляем пустой элемент:

<div id="tooltip"></div>

Для этого элемента прописываем стиль.

#tooltip {
  z-index: 9999;
  position: absolute;
  display: none;
  top:0px;
  left:0px;
  width: 250px;
  background-color: #fff;
  padding: 5px 10px 5px 10px;
  color: #000;
  border-radius: 5px; 
  box-shadow: 0 1px 2px #555;
}

Добавляем элементы, при наведении на которые будет появляться подсказка.

    
<p><span data-tooltip="Подсказка номер 1">Подсказка 1</span> | <span data-tooltip="Подсказка номер 2">Подсказка 2</span></p>

И остается jquery скрипт.

$(function(){
      $("[data-tooltip]").mousemove(function (eventObject) {
          $data_tooltip = $(this).attr("data-tooltip");
          $("#tooltip").html($data_tooltip)
              .css({ 
                "top" : eventObject.pageY + 5,
                "left" : eventObject.pageX + 5
              })
              .show();
          }).mouseout(function () {
            $("#tooltip").hide()
              .html("")
              .css({
                  "top" : 0,
                  "left" : 0
              });
      });
});