QR CODE для записи

Easy Tooltip jQuery для ссылок и картинок

Для своего сайта я долго искал хорошие «всплывашки» удовлетворяющие мои «фантазии». А требовалось мне совсем немного — это «всплывашки» на ссылках (атрибут TITLE у тега <A>) и на картинках (атрибут ALT у тега <IMG>) и, конечно же, маленький вес.

Один скрипт, который мне понравился, я нашел в фрэймворке Prototype. Этот скрипт работал и без самого Prototype, но он весил достаточно много, около 10 кб (без сжатия).

Именно поэтому я продолжал свои поиски. Конечно для многих 10 кб — это немного, но зачем же заставлять пользователя грузить лишний код? Да и самому приятнее, когда в коде ничего лишнего и код понятнее, удобнее и его легко можно подправить под себя.

И вот в один прекрасный день я нашел простенький ToolTip’s скрипт. Конечно он оказался не без греха, но код был чистый и без лишнего хлама.

Какие же минусы присутствовали? Это — раздельный скрипты, т.е. отдельно для картинок (ALT) и отдельно для ссылок (TITLE), а также при расположение «всплывашки» у правого края экрана она уходила за края, а это плохо.

В общем хватит слов. Предлагаю вам ознакомиться с переводом оригинальной статьи автора этого скрипта — Alen Grakalic. А также ознакомиться с моей модификацией этого скрипта. Размер моего скрипта, примерно как и скрипта Alen Grakalic (от 1,06 до 1,18 Кб) всего 1,43 КБ без сжатия (с комментариями в том числе), с сжатием — всего 630 байт 696 байт.

Easiest Tooltip and Image Preview Using jQuery

Я люблю JQuery, ведь он делает жизнь разработчика легче. Хотя мне потребовалось время, чтобы привыкнуть к нему. Я до сих пор предпочитаю писать свои собственные тексты скриптов, но я не могу отрицать его преимущества. Недавно я создавал проект, в котором требовался предварительный просмотр изображений при наведение на эскиз. При этом они мне требовались в виде tooltip — всплывающих подсказок при наведении курсора на ссылку или на привью изображения. А поскольку проект уже использовал Jquery, то я решил сделать эти tooltip легкими и узнать, что же можно сделать с этой необыкновенной библиотеки jQuery. И вот я придумал скрипт, который оказался до обидного простым! Самое замечательно то, что он может быть использована для различных целей. Сегодня я покажу вам эти 3 примера использования очень простого скрипта.

Особенности и Принципы

Что этот скрипт делает? Он добавляет элемент в код страницы, в момент наведение курсор на определенный объект. Появление этого элемента предопределено в CSS (абсолютное позиционирование и стили), поэтому все, что нужно сделать, это заполнить элемент с содержанием, вычислить позицию курсора мыши, и заставить его двигаться вслед за курсором. Когда курсор перемещается над объектом, элемент перемещается за ним, а когда курсор уходит с объекта, элемент будет удален.

Вот несколько примеров, где можно увидеть этот скрипт в действии.

Example 1: The Simplest jQuery Tooltip Ever

Скрипт считывает данные из атрибута TITLE тега <A> и размещает его внутри всплывающего элемента.
HTML код выглядит следующим образом:

<a href="http://cssglobe.com" title="Web Standards Magazine">Roll over for tooltip</a>

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

Example 2: Image Preview Gallery

В этом примере у нас имеется несколько эскизов картинок. И когда мы наведём курсор на эскиз, то в tooltip скриптом загружается картинка из атрибута HREF тега <A>. Этот вариант очень удобный, т.к. пользователь может посмотреть изображение даже с отключенным JavaScript.

<a href="1.jpg"><img src="1s.jpg" alt="gallery thumbnail" /></a>

А если вы хотите использовать заголовок, то добавьте атрибут TITLE

<a href="image.jpg" title="Great looking landscape">Roll over to preview</a>

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

Example 3: Links With URL Preview

Это вариант скрипта требует немного больше усилий, но они стоят того чтобы иметь дополнительный функционал на своем сайте. В этом скрипте показывается небольшой скриншот сайта при наведение на ссылку (URL). Вам надо только сделать скриншот сайта и вставить получившееся изображение в атрибут REL тега <A>, а скрипт сделает все остальное остальное.

<a href="http://www.cssglobe.com" rel="cssg_screenshot.jpg">Css Globe</a>

И так же, как в предыдущем примере, вы можете добавить заголовок в атрибут TITLE

<a href="http://www.cssglobe.com" rel="cssg_screenshot.jpg" title="Web Standards Magazine">Css Globe</a>

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

Все три примера вы можете скачать с оф. сайта или скачать с моего.

А теперь моя переделка этого скрипта. Две нужные мне вещи — «всплывашки» на ссылках (атрибут TITLE у тега <A>) и на картинках (атрибут ALT у тега <IMG>) — в одном скрипте.

Далее всё описание в комментариях к коду

Версия 2 [Update: март 2013]

this.ToolTip = function(){

	// Задаем координаты ToolTip относительно курсора
	yOffset=10;
	xOffset=20;

	$("a, img, acronym").hover(

		function(e){

			// Проверяем, не равны ли Alt и Title
			// Если равны, то "выравниваем" их
			// Если они разные, то складываем
			if(this.title==this.alt){
				this.t=this.alt
			}else{
				this.t=this.title+this.alt
			}

			// Обнуляем действующие Alt и Title
			this.title=this.alt="";
			this.t=this.t.replace(/undefined/g,"");

			// Проверяем на ошибки, если их нет, то
			// проверяем не создан ли уже ToolTip,
			// ибо если будет одновременно и ссылка и изображение,
			// то будет неприятность - два ToolTip.
			// Поэтому если он уже создан, то объединяем
			if(this.t!='undefined'&&this.t!="NULL"&&this.t!=""){
				if($("div").is("#tooltip")){
					$("#tooltip").append("<br>"+this.t);
				}else{
					$("body").append("<div id='tooltip'>"+this.t+"</div>");
				}
			}

		},

		// Функция удаления ToolTip и возаращения данных в Title
		// Alt нам не нужен, ибо Title есть у всех, а Alt только у Img
		function(){
			this.title=this.t;
			$("#tooltip").remove();
		}

	);

	// Заставляем двигаться за курсором
	$("a, img, acronym").mousemove(function(e){

		// Но при условие... В этом условие вводим проверку
		// с какой стороны от курсора показывать всплывашку
		// Иначе, она будет уходить за пределы экрана
		if($(document).width() / 2 < e.pageX){
			$("#tooltip").css("top",(e.pageY-yOffset)+"px").css('left',(e.pageX-$("#tooltip").width()-14-xOffset)+"px")
		}else{
			$("#tooltip").css("top",(e.pageY-yOffset)+"px").css("left",(e.pageX+xOffset)+"px")
		}
		
	})

};

this.ToolTip = function(){

	// Задаем координаты "всплывашки" относительно курсора
	yOffset = 10;
	xOffset = 20;

	// Объявляем теги с которыми будем работать
	$("a, img").hover(function(e){
		// создаем новую переменную, в которой объединяем атрибуты,
		// если вдруг они будут и в TITLE, и ALT, и просто чтобы не выбирать.
		// Так меньше кода, а функционал тот же.
		this.t = this.title + this.alt;
		// Обнуляем оригинальные TITLE и ALT, чтобы стандартные функции браузера не показывали нам "всплывашку"
		this.title = this.alt = "";
		// Т.к. JS имеет неприятное свойства пустым элементам присваивать значение undefined, то удаляем его
		this.t = this.t.replace(/undefined/g, "");
		// Создаем условие. В условие внесено несколько проверок.
		// Если проверка пройдена, то тогда показываем всплывашку
			if (this.t != 'undefined' && this.t != "NULL" && this.t != ""){
				// Ноу коммент. Думаю понятно
				$("body").append("<p id='ToolTip'>"+ this.t +"</p>");
				// Присваиваем css стили для всплывашки.
				// Хотя их можно и в CSS файл вынести,
				// что я и рекомендую сделать
				// $("#ToolTip")
				// .css({ maxWidth: 300 });
			}
	},
	// Создаем функцию заметания следов.
	// Т.е. возвращаем в TITLE обратно все буковки потертые ранее.
	// Возвращаем в атрибут TITLE, а не ALT т.к. нам теперь без разницы где описание будет сидеть
	// а ALT не поддерживается тегом A
	function(){
		this.title = this.t;
		$("#ToolTip").remove();
	});
	// Заставляем двигаться за курсором
	$("a, img").mousemove(function(e){
		// Но при условие... В этом условие вводим проверку
		// с какой стороны от курсора показывать всплывашку
		// Иначе, она будет уходить за пределы экрана
		if($(document).width() / 2 < e.pageX){
			$("#ToolTip")
			.css("top",(e.pageY - yOffset) + "px")
			.css('left',(e.pageX - $("#ToolTip").width() - xOffset) + "px");
		} else {
			$("#ToolTip")
			.css("top",(e.pageY - yOffset) + "px")
			.css("left",(e.pageX + xOffset) + "px");
		}
	});
};

Теперь объявляем о работе скрипта. Этот кусок кода можно вставить в файл со скриптом (как у меня), или в HTML код страницы

$(document).ready(function(){
	ToolTip();
});

И создаем CSS стили

#tooltip {
	position: absolute;
	z-index: 999;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
	max-width: 300px;
}

Обратите внимание, что обязательно должно быть абсолютное позициинирование, и рекомендуется z-index максимально большой, чтобы «всплывашка» не оказалась случайно под каким нибудь элементом.

Также обратите внимание, что max-width и opacity не поддерживаются IE6. Хотя ОСЛУ6 пора бы уже ……

Демонстрацию Easy Tooltip jQuery для ссылок и картинок .

Easy Tooltip jQuery Mod 2

Сжатая версия в архиве незначительно изменена, чтобы не надо было вызывать функцию ToolTip(), а достаточно подключить к странице скрипт и задать стили.

Easy Tooltip jQuery Mod 1