Ещё один простой блог в интернете, одного из жителей Сызрани, который считает себя дизайнером, WEB-мастером и фотографом-любителем

просто блог

QR CODE для записиQR CODE для записи “Easy Tooltip jQuery для ссылок и картинок”

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")
		}
		
	})

};
Версия 1
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

  1. Oleg # link

    Здравствуйте.
    Как сделать, чтобы подсказка появлялась над курсором?
    Спасибо.

  2. BaNru # link

    Комментарии в коде явно говорят где:

    // Задаем координаты ToolTip относительно курсора

  3. Oleg # link

    Еще вопрос — как вывести тайтл, если он прописан не в a или img ?

    Допустим:

    или

  4. Oleg # link

    Комментарий выше обрезал html код

    Как вывести, если title находится в LI или B тегах?

  5. Oleg # link

    И это не ссылки, в отличие от A или IMG

  6. BaNru # link

    Ну прочитай уже статью и комментарии к коду, там всё написано

    // Объявляем теги с которыми будем работать

  7. Oleg # link

    С выше озвученными вопросами разобрался — спасибо.

    Но возник новый. Добавил к подсказке стрелочку снизу:
    #tooltip:before{
    content: »;
    position: absolute;
    left: 20px; bottom: -12px;
    border: 6px solid transparent;
    border-top: 6px solid #000000;
    }
    Но стрелочка имеет строгую позицию, и когда ссылка справа и подсказка смещается влево, чтобы не выходить за пределы окна, стрелка оказывается за пределами ссылки. Как отображение ссылки увязать с позиционированием подсказки?

  8. Oleg # link

    Увы, но из вашего ответа я не нашел решения.
    Можно само решение?

  9. BaNru # link

    Ну да, немного сложнее, неправильно понял
    https://jsfiddle.net/BaNru/4kcfh2rc/

    if($(document).width() / 2 < e.pageX){
      $("#tooltip").css("top",(e.pageY-yOffset)+"px").css('left',(e.pageX-$("#tooltip").width()-14-xOffset)+"px").addClass('right')
    }else{
      $("#tooltip").css("top",(e.pageY-yOffset)+"px").css("left",(e.pageX+xOffset)+"px").removeClass('right')
    }
    #tooltip.right:before{
      left: auto;
      right: 20px;
    }
  10. Oleg # link

    Отлично, работает. Спасибо.

    Еще один вопрос. Сейчас подсказка бегает за курсором. Как сделать, чтобы для определенных тегов, подсказка показывалась строго по центру элемента и не перемещалась вслед за курсором?

  11. BaNru # link

    Ну может всё таки уже прочитать комментарии к коду?

    // Заставляем двигаться за курсором

  12. Oleg # link

    Читал и пробовал. Убираю теги, оставляю только $(«img, acronym»)
    В результате у картинок подсказка есть, у всего остального нет её вообще.

  13. Oleg # link

    Не то, но все равно спасибо за помощь.

  14. BaNru # link

    Не то потому что постоянно новая позиция? Вот поэтому и проще и правильнее сделать на CSS, чем подстраивать скрипт.

  15. Oleg # link

    Но разве можно реализовать на чистом CSS, если ссылки внутритекстовые не имеют какого-либо прописанного class? Я не говорю о ссылках в шаблоне, где можно прописать любой дополнительный class.

  16. Igor # link

    а как сделать подсказку многострочной?
    или чтобы подставлялось содержимое указанного div-контейнера?

  17. BaNru # link

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

    Подсказки изначально многострочные. Если надо принудительно перенести строку, то добавляйте тег
    Чтобы получать содержимое какого-то div-контейнера — необходимо строку
    this.t = this.title + this.alt;
    заменить на получение данных из контейнера, например так:
    this.t = $(‘div#containder’).html();

    А вот эту строчку можно будет удалить, чтобы он не писал этот контейнер в title
    this.title = this.t;

  18. Igor # link

    Спасибо за ответ)
    Насчет многострочности, я же не могу вставить тег переноса строки «br» в title элемента.. там только текст воспринимается. Как же тогда сделать подсказку из нескольких строк? Можно одновременно использовать и alt и title, но это максимум 2 строки, а если надо больше?

    По div понятно, а есть возможность показывать подсказки используя разные div на одной странице?

    Извиняюсь если вопросы глупо выглядят, я новичок в JS, да и html тоже не особо)

  19. BaNru # link

    Можно использовать BR, никто не может тебе это запретить. Конечно это будет не семантично.
    Можно использовать замену символа. Например использовать переносы строк \n, а потом заменять на BR и обратно

    После вот этого говнокода ( это плохой код, но работающий :D )

    if(this.t!='undefined'&&this.t!="NULL"&&this.t!=""){

    Добавляем вот такою замену

    this.t = this.t.replace(/\n/g,"<br>")

    А ниже, где возвращаем данные в ALT, обратное преобразование

    this.title=this.t.replace(/<br>/g,"\n");

    DIV’ы разные тоже можно. Для этого надо как-то сообщать какой DIV показывать, поэтому надо будет добавить новый атрибу, типа data-div

    <a href="#" data-div="div_1"></a>

    Затем его активировать. Как я раньше писал:

    this.t = $("div#containder").html();

    Только указать этот data-атрибут

    this.t = $($(this).attr("data-div")).html();
  20. Igor # link

    любопытно..)
    большое спасибо, буду пробовать)

  21. BaNru # link

    Ошибка была в ответе, исправил вот эту строку

    this.t = this.t.replace(/\n/g,"<br>")
  22. Igor # link

    Простите, я немного запутался с div’ами(
    Можете полный скрипт скинуть, для использования разных div’ов на одной странице?

    Причем можно только для тега «img», без использования title и alt, так код явно меньше будет, не нужно их сравнивать и даже возвращать значения

  23. Igor # link

    кстати тут у вас все равно ошибка)

    this.t = this.t.replace(/\n/g,"<br>")

    должно быть:

    this.t = this.t.replace(/\\n/g,"<br>");

    и соответственно

    this.title=this.t.replace(/\\n/g,"<br>");
  24. Igor # link

    ой, я нуб, выделение кода забыл(

  25. BaNru # link

    Да, я выше наделал ошибок, я ж не проверял, а просто в нужном направление пинал.
    Вот рабочий вариант, ничего лишнего.
    https://jsfiddle.net/BaNru/zmyj8zgL/

  26. Anton # link

    Спасибо за плагин.

    В css только поправьте
    max-width: 300;
    на
    max-width: 300px;

  27. BaNru # link

    Спасибо, поправил.

Оставить комментарий

В блоге включена ручная модерация комментариев. Нет смысла повторно отправлять комментарий.
Поля отмеченный звездочкой * обязательны к заполнению

Перед отправкой формы: