jQuery Tooltips от Jörn Zaefferer. Всплывающие подсказки с помощью jQuery

jQuery Tooltips от Jörn Zaefferer. Всплывающие подсказки с помощью jQuery Внедряем всплывающие подсказки на jQuery.

Скачиваем JavaScript библиотеку для всплывающих подсказок - http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/.

Для того чтобы использовать плагин, нужно в <head> страницы подключить библиотеку jQuery (если не подключена), плагин Dimensions (если надо) и сам Tooltip.

Например:

<script type="text/javascript" src="js/jquery-compressed.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.min.js"></script>

Примечание. Все необходимые файлы находятся в архиве с библиотекой.

Дописываем после строки 40:

...
$.tooltip = {
		blocked: false,
		defaults: {
			track: true,
			delay: 0,
			fade: false,
			showURL: false,
			extraClass: "",
			top: 15,
			left: 15,
			id: "tooltip",
			bodyHandler: function() {
				return $(this).attr('tip');
			},
			timer: 1000
		},
		block: function() {
			$.tooltip.blocked = !$.tooltip.blocked;
		}
	};
...

Атрибут 'tip' будет содержать текст всплывающей подсказки.

В CSS дописываем:

.tooltip {
  color:#008d0c;
  cursor:pointer;
}

#tooltip {
position: absolute;
border: 1px #008d0c solid;
padding: 6px;
background-color: white;
z-index: 101; 
color: #008d0c;
}

#tooltip h3, #tooltip div { margin: 0; }

Дальше в контенте, где надо подсветить подсказку обрамляем её:

<span class="tooltip" tip="досл: проницательный, хитроумный">sutil</span>

Рабочий пример смотрите на learnsongs.ru в тексте песни Noelia - Tú с переводом. Загляните и в биографию Ноэлии.

Noelia

 

Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.