Главная JavaScript

Красивые всплывающие подсказки с помощью jQuery

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

Красивые всплывающие подсказки с помощью jQuery

Идею я подсмотрел на сайте электронного бухгалтера «Эльба». Там приятный и удобный интерфейс, и мне очень понравились всплывающие подсказки, которые присутствуют повсюду.

Я хотел было просто взять из исходников сайта код скрипта, который реализует это дело, но не тут-то было. Там у них столько разных скриптов, собранных в одну кучу (не знаю, как это правильно называется на профессиональном языке), что выудить оттуда что-то конкретное мне было затруднительно.

Поэтому я взял и написал свой скрипт, который делает примерно то же самое. Я знаю, что есть уже множество готовых решений, но мне интереснее самому написать скрипт с нуля, чтобы в очередной раз попрактиковаться с jQuery.

Демонстрация

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

Установка

Код скрипта выглядит следующим образом:

(function($){
$(function() {

	$('span.jQtooltip').each(function() {
		var el = $(this);
		var title = el.attr('title');
		if (title && title != '') {
			el.attr('title', '').append('<div>' + title + '</div>');
			var width = el.find('div').width();
			var height = el.find('div').height();
			el.hover(
				function() {
					el.find('div')
						.clearQueue()
						.delay(200)
						.animate({width: width + 20, height: height + 20}, 200).show(200)
						.animate({width: width, height: height}, 200);
				},
				function() {
					el.find('div')
						.animate({width: width + 20, height: height + 20}, 150)
						.animate({width: 'hide', height: 'hide'}, 150);
				}
			).mouseleave(function() {
				if (el.children().is(':hidden')) el.find('div').clearQueue();
			});
		}
	})

})
})(jQuery)

Сохраните его в файл с расширением .js, например, scripts. js и подключите к сайту перед тегом </head>, не забыв одновременно подключить и фреймворк jQuery, если это еще не сделано. Т. е. в html-код сайта добавляется такой код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ПУТЬ_ДО_ФАЙЛА_НА_ВАШЕМ_САЙТЕ/scripts.js"></script>

Далее нужно добавить в CSS-файл вашего сайта следующие стили:

.jQtooltip {
	position: relative;
	cursor: help;
	border-bottom: 1px dotted;
}
.jQtooltip div {
	display: none;
	position: absolute;
	bottom: -1px;
	left: -1px;
	z-index: 1000;
	width: 190px;
	padding: 8px 12px;
	text-align: left;
	font-size: 12px;
	line-height: 16px;
	color: #000;
	box-shadow: 0 1px 3px #C4C4C4;
	border: 1px solid #DBB779;
	background: #FFF6BD;
	border-radius: 2px;
}

Теперь осталось поместить необходимый текст в тег <span> с классом jQtooltip и атрибутом title, т. е. вот так:

<span class="jQtooltip" title="текст всплывающей подсказки">текст</span>

Если вы желаете, чтобы вместо текста был квадратик, как в примере, тогда в CSS-файл нужно добавить еще такие стили:

.jQtooltip.mini {
	display: inline-block;
	vertical-align: bottom;
	font-size: 11px;
	width: 14px;
	line-height: 13px;
	text-align: center;
	margin-left: 2px;
	top: -2px;
	color: #9A4D18;
	border: 1px solid #FAD28F;
	background: #FFF6BD;
	border-radius: 2px;
}

А html-код в этом случае будет таким:

<span class="jQtooltip mini" title="текст всплывающей подсказки">!</span>

В зависимости от своих предпочтений, вы можете поменять CSS-код на тот, который вам придется по душе. Т. е., как видите, оформление всплывающей подсказки можно сделать любым, для этого лишь нужно разбираться в CSS.

Вот, собственно, и все.

P.S. Не сомневаюсь, что скрипт можно сделать и более грамотным, но меня, в принципе, устраивает и то, что получилось.

* * *

Ищите, где разместить свой сайт в Украине? Выбирайте хостинг, проверенный временем — X-HOST. Вы получите качественный и надежный хостинг по выгодным тарифам.

Комментарии (144)

  1. когда говоришь добавить в CSS имеешь в виду style. css? там целая папка css.
    и этот спан куда приклеить тоже в сss???

    • Спасибо автору за очень полезную статью. Она нужная и достаточно понятная… Скажите, пожалуйста, у Вас есть скайп? Просто мне эти знания очень нужны, но я не имею права на ошибку… Если есть такая возможность, я прошу Вашей помощи онлайн… Еще раз спасибо за знания…

  2. Здравствуйте. У Вас в скрипте используются class и в табличке стилей соответственно, как поменять class на id? В таблице понятно как, а в скипте как?

  3. Вместо span. jQtooltip сделайте #jQtooltip. Но в этом случае скрипт сработает только для первой подсказки на странице.

    А если сделать span#jQtooltip то всё работает

  4. Владимир
    10 лет назад

    Здравствуйте!
    Очередное прекрасное творение. :) Долго искал разные варианты, но Ваш просто отличный. Единственная проблема у меня возникла, похоже не срабатывает. jQtooltip div. Т. е. окно с текстом выглядит явно не таким, как должно быть по описанию в css. Не могу понять, как такое может быть. .jQtooltip { работает, а. jQtooltip div.
    В чем может быть проблема?

    • Покажите живой пример. Без него можно только гадать.

      • Вот пример: http://www.vseoglazah.ru/eye-diseases/hypermetropia/ Там прямо в начале, к примеру, слово «аккомодации».
        Вчера несколько часов пытался разобраться, но так и не понял. Такое ощущение, что не срабатывает скрипт, т.к. если я его убираю, то ничего не меняется. Проблема в том, что всплывающий текст в div не оборачивается.
        В tips. js поместил Ваш код. В CSS всё добавил, но почему-то не работает.
        jQuery подключил:

        <script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.min.js" charset="UTF-8"></script>

        Много вариантов перебрал, Ваш больше всего понравился, но почему-то не срабатывает. :(

  5. Владимир
    10 лет назад

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

  6. Здравствуйте, скажите пожалуйста как заменить вопросительный знак на восклицательный или какой-то другой или вообще убрать его? Просто я реализовал такие подсказки для выведения тайтлов из ссылок и вопросительный знак там ни к чему, помогите пожалуйста, обыскал весь код скрипта и интернет, не нашел ничего такого и не могу понять как поменять или убрать… Примерно думаю что это с el. find как-то связано… Помогите пожалуйста!

  7. Здравствуйте! Что-то мучаюсь который час, никак не добьюсь результата. Сильно не пинайте за код, я всего лишь «любитель», и делаю для себя…
    В общем, вот часть кода —

    <table style="margin-bottom:3px;" width="597px" class="table2" >
    <tbody>
    <tr onclick="show(1,18);">
    
    <td style="color:#036; background-color:#e4edfc;" colspan="2">1. Заголовок</td>
    
    </tr>
    <tr id="id1" style="display:none">
    <td><span class="jQtooltip" title="Вспывающая подсказка, описание и т.д.</span></td>
    <td>еще одна ячейка</td>
    </tr>
    <tr id="id2" style="display:none">
    td><span class="jQtooltip" title="Вспывающая подсказка, описание и т.д.</span></td>
    <td>еще одна ячейка</td>
    </tr>
    ...........
    

    Таблица на основе этого скрипта — http://neverlex.com/cat/programming/price-list-with-javascript/
    Проблема. При наведении курсора, .jQtooltip div срабатывает вниз, в небольшом по высоте блоке, а текст соответственно сползает далеко за пределы дива по высоте.
    Склоняюсь к мысли, что что-то конфликтует.

    • Извиняюсь, наспех отредактировал пример своего кода выше, допустил ошибки. правильный вот:

      <table style="margin-bottom:3px;" width="597px" class="table2" >  
      <tbody>  
      <tr onclick="show(1,18);">  
        
      <td style="color:#036; background-color:#e4edfc;" colspan="2">1. Заголовок</td>  
        
      </tr>  
      <tr id="id1" style="display:none">  
      <td><span class="jQtooltip" title="Вспывающая подсказка, описание и т.д."</span>Текст</td>  
      <td>еще одна ячейка</td>  
      </tr>  
      <tr id="id2" style="display:none">  
      td><span class="jQtooltip" title="Вспывающая подсказка, описание и т.д."</span>Текст</td>  
      <td>еще одна ячейка</td>  
      </tr>  
      ...........  
      • Покажите лучше живой пример. Этот код мне ни о чем не говорит.

        • Тестовый пример, в прайсе первый раздел, и первый подпункт с применением подсказки fr54382.tw1.ru/price.html Проблему нашел.
          Проблема с высотой у. jQtooltip div, если проставлять в пикселях — открывает, но пиксели под каждый объем текста не просчитаешь. Так же если отменить у строки с идентификатором id1 свойство display: none; - элемент подсказки работает как надо, но не скрывается строка.

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

            • Сейчас прочитал на 2 странице комментарии — оказывается я не первый кто с этим столкнулся. Жаль. Хм. т. е. получается строка наследует все свойства на вложенные элементы, этим самым вызывая этот баг?

              • Суть в том, что для div’а со подсказкой, перед тем, как он отобразиться, определяется его высота. Но, когда элемент с подсказкой находится в элементе, у которого свойство display: none, в этом случае у div’а со подсказкой высота определяется неправильно, из-за чего и возникает такой баг.

              • предлагаю вынести див в body и рассчитывать смещение top по высоте текущего элемента.

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

    • Предлагаю, как-то так

      $(document).on({
              mouseenter: function () {
                $(this).find('div')
                  .clearQueue()
                  .delay(200)
                  .animate({width: width + 20, height: height + 20}, 200).show(200)
                  .animate({width: width, height: height}, 200);
              },
              mouseleave: function () {
                $(this).find('div')
                  .animate({width: width + 20, height: height + 20}, 150)
                  .animate({width: 'hide', height: 'hide'}, 150);
                  if ($(this).children().is(':hidden')) el.find('div').clearQueue();
              }
            }, ".tooltip");
  9. Может быть, кому-то и не нравятся подсказки как всплывающие окна, но всё же меня они прельщают тем, что информация бывает полезной. Иногда смотришь, но не находишь в нужном месте искомое, а тут вылетает подсказка, на которую невольно обращаешь внимание, и понимаешь, что там то, что надо. Поэтому не стоит их игнорировать, лучше их воплощать в реальность.

  10. спасибо огромное !

Ваш комментарий