Красивые всплывающие подсказки с помощью 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. Вы получите качественный и надежный хостинг по выгодным тарифам.

Полезные комментарии (1)
Комментарии (142)
  1. 1
    alik

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

    • 2

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

  2. 3
    Алексей

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

  3. 5
    Алексей

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

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

  4. 6
    Владимир

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

  5. 11
    Владимир

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

  6. 13
    Александр

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

  7. 18
    Михаил

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

    <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 срабатывает вниз, в небольшом по высоте блоке, а текст соответственно сползает далеко за пределы дива по высоте.
    Склоняюсь к мысли, что что то конфликтует..

    • 19
      Михаил

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

      <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> 
      ........... 
      • 20

        Покажите лучше живой пример. Этот код мне ни о чем не говорит.

        • 21
          Михаил

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

  8. 26
    atatat

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

    • 27
      atatat

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

      $(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");
  1. 1

    Нашел решение. Вот весь код скрипта:

    $('span.jQtooltip').each(function() {
    	var title = $(this).attr('title');
    	if (title && title != '') {
    		$(this).attr('title', '').append('<div>' + title + '</div>');
    		var width = $(this).find('div').width();
    		var height = $(this).find('div').height();
    		$(this).hover(
    			function() {
    				$(this).find('div')
    					.clearQueue()
    					.delay(1000)
    					.animate({width: width + 20, height: height + 20}, 200).show(200)
    					.animate({width: width, height: height}, 200);
    			},
    			function() {
    				$(this).find('div')
    					.animate({width: width + 20, height: height + 20}, 150)
    					.animate({width: 'hide', height: 'hide'}, 150);
    			}
    		).mouseleave(function() {
    			if ($(this).children().is(':hidden')) $(this).find('div').clearQueue();
    		});
    	}
    })
    
Ваш комментарий