RealAdmin.ru

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

jQuery,JavaScript
Категория: Кодинг
22 Фев 2015 г. в 12:50

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

Ссылка на подсказку 1 | Ссылка на подсказку 2

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

Исходим из того, что 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>
Подсказка 1.
Вы нажали на первую ссылку
(help)

Подсказок может быть сколько угодно. Основные требования, это 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: 342px;
  background-color: #fff;
  padding: 5px 10px 5px 10px;
  color: #000;
  border: 1px solid #888;
  border-radius: 5px; 
  box-shadow: 0 1px 2px #555;
  box-sizing: ;
}

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

    
<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").text($data_tooltip)
              .css({ 
                "top" : eventObject.pageY + 5,
                "left" : eventObject.pageX + 5
              })
              .show();
          }).mouseout(function () {
            $("#tooltip").hide()
              .text("")
              .css({
                  "top" : 0,
                  "left" : 0
              });
      });
});
Подсказка 2.
Вы нажали на вторую ссылку
Теги:
Посмотрите похожее — 6
Комментарии — 30
  1. avatar bibitur 26 октября 2015, 09:30(был изменён) #
    А как сделать, чтобы текст подсказки забирался из отдельного текстового или html-файла?
    Я хочу сделать один сводный файл со всеми подсказками, а при необходимости использования на странице подсказки, просто указывать путь к нужному куску текста. Как на Яндекс.Маркет. На мой взгляд, это намного удобнее в плане правки исходного текста подсказок и их одинаковости на всех страницах.
    1. avatar Simkin Andrew 26 октября 2015, 14:09 #
      Это уже индивидуально нужно что-то разрабатывать. Либо парсить на php эти текстовые файлы и рассовывать текст по скрытым блокам, либо использовать Ajax. В двух строчках не опишешь.
      1. avatar Вася 11 декабря 2015, 15:33 #
        Зачем ajax? Зачем парсить в php? Зачем по DIV-у на каждый элемент? (кроме «у меня хинты по оформлению разные будут»). JavaScript и JQuery у Вас уже используется. Ну и пользуйтесь себе ассоциативными массивами.
        Хранить как js в отдельном файле примерно так:
        var hints = {«real-hint1»: «1», «real-hint2»: «2» ......};
        Он будет отлично кешироваться браузером и Вашим веб-сервером. Доступаться в js-коде так:
        hints[«real-hint1»]
        где вместо «real-hint1» используйте id элемента (у вас — span с надписями «Ссылка»). Тогда Вам не понадобятся DIV-вы на каждый хинт — конструируйте их из одного, невидимого шаблона — совсем хорошо, если у Вас на странице 50 хинтов — реально сократится размер страницы.
        1. avatar Simkin Andrew 11 декабря 2015, 16:56 #
          Да, действительно так проще намного.
    2. avatar setcode 21 февраля 2016, 20:27 #
      Блин ((( То что нужно, но не получается, при клике подсказка появляется и тут же пропадает.
      Прикручиваю все это дело к WP
      1. avatar Simkin Andrew 22 февраля 2016, 10:48 #
        Попробуй удалить из скрипта этот кусок, без него должно заработать как надо:
        document.onclick = function(e){ 
        	if ($(e.target).hasClass('real-hint')==false) 
        	$('.real-hint').hide('fast');
        	 return;
        }
      2. avatar Роман 12 марта 2016, 06:28(был изменён) #
        Здравствуйте. Я столкнулся с такой проблемой, в 1 варианте примера, а именно того примера подсказки который открывает окно подсказки при клике на ссылку, работает не корректно, я имею введу что, при нажатии на ссылку окно подсказки множество раз открывается и сразу же закрывается, я решил последовать тому примеру который Вы отписали для (setcode 21 февраля 2016 в 20:27), этот вариант не до конца решил всю суть проблемы, то есть после удаления той части кода скрипта который Вы отписывали выше, подсказка действительно перестала закрываться при нажатии на ссылку, но она также и перестала закрываться при нажатии на любую область, за исключением самого крестика который расположен внутри окна подсказки, и здесь к сожалению скрипт снова показал себя не корректно( Скажите пожалуйста, почему на вашей странице 1-й пример подсказки работает абсолютно корректно, и с чем связанно то что, внутри HTML кода Вашей страницы вложена расширенная версия скрипта, а не та что Вы опубликовали в первом примере?
        1. avatar Simkin Andrew 12 марта 2016, 09:42(был изменён) #
          Привет. Это не расширенный код, всё что начинается с
          $("[data-tooltip]").mousemove
          это относится уже ко второй части статьи, с первой никак не связано.

          Что касается твоей проблемы — попробуй в функции
          $('.real-show-hint').on("click", function(e){
          заменить return; на return false;, а то что удалял — верни.
        2. avatar Роман 12 марта 2016, 19:52 #
          Благодарю Вас за помощь, это очень мне помогло! По возможности ответьте пожалуйста ещё на несколько вопросов.

          1. Зачем в коде присутствует этот элемент, после удаления этих строк ничего не изменилось, скрипт работает корректно?

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

          2. Как сделать так что бы при нажатии к примеру на 2 подсказку 1 подсказка сразу же автоматически закрывалась?
          1. avatar Роман 12 марта 2016, 19:59 #
            Относительно 1-вого вопроса извиняюсь, глупый был вопрос с моей стороны, я пока что только учусь, так что не судите строго)
            1. avatar Полина 13 марта 2016, 07:20 #
              Подскажите пожалуйста, что конкретно нужно изменить в коде что бы при нажатии на текст окна подсказки оно не сворачивалась? Я имею введу именно тот текст который находится к примеру в теге span TEXT /span внутри самого окна подсказки.
              1. avatar MoXa 31 марта 2016, 13:46 #
                Спасибо огромное за труды!!!
                То что мне нужно было и с чем провозилась три дня!!!

                1. avatar Simkin Andrew 31 марта 2016, 21:44 #
                  Всё для Вас. Спасибо за отзыв.
                2. avatar Алексей 06 августа 2016, 14:24(был изменён) #
                  Спасибо за код. Подскажите, как в подсказке написать текст в несколько строк?
                  1. avatar Simkin Andrew 06 августа 2016, 15:29 #
                    В первом способе переносится через br, можно посмотреть на самой первой ссылке «Ссылка на подсказку 1». А во втором способе перенос не предусмотрен, можно только фиксированную ширину поля уменьшить, тогда текст автоматом будет переноситься:
                    width: 342px;
                    Либо каким-то другим jquery плагином пробовать вывести подсказку, их много.
                  2. avatar Валерий Новиков 08 августа 2016, 19:31 #
                    Доброго времени суток…

                    Подскажите пожалуйста:

                    Как сделать так что бы при нажатии к примеру на вторую подсказку первая подсказка сразу же автоматически закрывалась?
                    1. avatar Simkin Andrew 09 августа 2016, 09:37 #
                      В обработчик попробуй добавить строку, которая будет сначала закрывать открытые подсказки:
                      $('.real-show-hint').on("click", function(e){
                      	$('.real-hint').hide();
                      	...
                      1. avatar Валерий Новиков 09 августа 2016, 12:54 #
                        спасибо
                    2. avatar Валерий Новиков 09 августа 2016, 13:42 #
                      еще вопрос а если я в эту подсказку хочу впихнуть форму… Я ее туда добавил но как только начинаю вводить в нее данные подсказка закрывается (
                      1. avatar Simkin Andrew 09 августа 2016, 14:39(был изменён) #
                        Тогда удаляй обработчик
                        document.onclick = function(e){...
                        закрыватся будет только при нажатии на крестик, по другому никак
                      2. avatar Estra 18 сентября 2016, 21:40 #
                        Во втором примере, что изменить что бы во всплывающей подсказке была картинка?
                        1. avatar Simkin Andrew 18 сентября 2016, 21:50 #
                          Второй способ только для простых текстовых подсказок… вставка картинок невозможна
                        2. avatar Neznajka 04 октября 2016, 09:45 #
                          Очень интересная статья!
                          Но — хочу вникнуть в суть, что вот это за «штуки»:
                          $('#last-order') и ещё ' аМаИаН'
                          Гугл про #last-order' и про ' аМаИаН' выдаёт всякую постороннюю хрень :(
                          Подскажите, что это за выражения и зачем они нужны в данном случае?
                          1. avatar Simkin Andrew 04 октября 2016, 10:03(был изменён) #
                            Спасибо большое, что написали про это. Строки нужно удалить, они попали в скрипт случайно. Удалил из статьи.
                            newStr = $('#last-order').html() + ' аМаИаН';
                            $data_tooltip = $data_tooltip.replace('0 аМаИаН',newStr);
                            Копировал скрипт из одного своего проекта, где требовалась подмена всплывающего текста в зависимости от другого элемента. аМаИаН — в правильной кодировке — минут. Соответственно шла подмена значения '0 минут' на значение из элемента #last-order, типа на 5 минут.
                          2. avatar Artem 07 ноября 2016, 14:59(был изменён) #
                            Привет, понравилась статья очень помог, один вопрос, во втором примере при наведении появляется подсказка с текстом можно сделать так что бы была картинка png ???
                            Я так понимаю в этом кусочке передается текст
                            $("#tooltip").text($data_tooltip)
                            мне бы картинку img/****.png
                            1. avatar Simkin Andrew 07 ноября 2016, 15:07 #
                              В data-tooltip можно только текст передать. Можно что-то придумать чтобы вставить и изображение, но это придётся переделывать скрипт.

                              Если же во всех подсказках будут именно картинки, то можно в data-tooltip передавать путь к изображению а в скрипте переделать блок на:
                              $("#tooltip").text('<img src="'+$data_tooltip+'">')
                              может что и выйдет.
                              1. avatar Artem 07 ноября 2016, 16:29(был изменён) #
                                нет выводит как текст следующее:
                                <img src="img/1.png">

                                черт с ним.
                                Может как то возможно в первом случае, там где по нажатию окно вылазит, оно всегда появляется в одном и том же месте,
                                var ypos = $(this).offset().top+24;
                                var xpos = $(this).offset().left;
                                а можно сделать так что бы по нажатию( допустим жму на картинку и в том месте где был курсор появилось это окошко или рядом с картинкой)
                                1. avatar Simkin Andrew 07 ноября 2016, 16:49(был изменён) #
                                  Да всё можно, просто переписывать надо код. Координаты появления задаются тут:
                                  var ypos = $(this).offset().top+24;
                                  var xpos = $(this).offset().left;
                                  нужно отловить клик на элементе, принять положение курсора в этом месте и передать в эти переменные.

                                  Ещё попробуй заменить на
                                  $("#tooltip").html('<img src="'+$data_tooltip+'">')
                                  Ну либо поищи jquery плагины с всплывающими подсказками. Наверняка полно разных.
                                  1. avatar Artem 07 ноября 2016, 17:41 #
                                    Ладно спасибо большое)
                                    1. avatar Artem 07 ноября 2016, 17:45 #
                                      Заработало)
                              © REALADMIN.RU   2016 г.
                              Страница сгенерирована: 0,1167 s | 10 mb.
                              На каком уровне Вы играете в шахматы?
                              О П Р О С
                              Home Question Top