Подсказки при наведении с помощью jQuery

В этом уроке мы напишем плагин jQuery для создания подсказок, которые будут появляться при наведении на определенные элементы нашей страницы.

Сегодня мы напишем простой плагин для jQuery, который заменит аттрибут titile элементов вашей страницы на красивые подсказки. Доступно 6 цветовых схем, так что легко можно подобрать под свой дизайн.

Html

Наш плагин будет работать следующим образом: он заменит все элементы с аттрибутом title

<a href="http://easy-code/" title="Go to Easy-Code.ru">Easy-Code.ru</a>

следующим кодом:

<a href="http://easy-code.ru/">Easy-Code.ru
<span style="margin-left: -60px;">Go to Easy-Code.ru
<span></span>
<span></span>
</span>
</a>

Обратите внимание, что заменяемая ссылка имеет класс .blue, этот класс определяет цвет нашей подсказки, вы можете выбрать red, blue, green, yellow, white и black, или вы можете создать свой с помощью CSS.

Посетители с отключенным JavaScript будут видеть обычные нестилизованные подсказки.

CSS

.colorTipContainer{
	position:relative;
	text-decoration:none !important;
}

.colorTip{

	display:none;
	position:absolute;
	left:50%;
	top:-30px;
	padding:6px;

	background-color:white;
	font-family:Arial,Helvetica,sans-serif;
	font-size:11px;
	font-style:normal;
	line-height:1;
	text-decoration:none;
	text-align:center;
	text-shadow:0 0 1px white;
	white-space:nowrap;

	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

.pointyTip,.pointyTipShadow{
	/* создаем треугольник */
	border:6px solid transparent;
	bottom:-12px;
	height:0;
	left:50%;
	margin-left:-6px;
	position:absolute;
	width:0;
}

.pointyTipShadow{
	border-width:7px;
	bottom:-14px;
	margin-left:-7px;
}

Теперь опишем наши 6 цветовых схем:

.white .pointyTip{ border-top-color:white;}
.white .pointyTipShadow{ border-top-color:#ddd;}
.white .colorTip{
	background-color:white;
	border:1px solid #DDDDDD;
	color:#555555;
}

.yellow .pointyTip{ border-top-color:#f9f2ba;}
.yellow .pointyTipShadow{ border-top-color:#e9d315;}
.yellow .colorTip{
	background-color:#f9f2ba;
	border:1px solid #e9d315;
	color:#5b5316;
}

.blue .pointyTip{ border-top-color:#d9f1fb;}
.blue .pointyTipShadow{ border-top-color:#7fcdee;}
.blue .colorTip{
	background-color:#d9f1fb;
	border:1px solid #7fcdee;
	color:#1b475a;
}

.green .pointyTip{ border-top-color:#f2fdf1;}
.green .pointyTipShadow{ border-top-color:#b6e184;}
.green .colorTip{
	background-color:#f2fdf1;
	border:1px solid #b6e184;
	color:#558221;
}

.red .pointyTip{ border-top-color:#bb3b1d;}
.red .pointyTipShadow{ border-top-color:#8f2a0f;}
.red .colorTip{
	background-color:#bb3b1d;
	border:1px solid #8f2a0f;
	color:#fcfcfc;
	text-shadow:none;
}

.black .pointyTip{ border-top-color:#333;}
.black .pointyTipShadow{ border-top-color:#111;}
.black .colorTip{
	background-color:#333;
	border:1px solid #111;
	color:#fcfcfc;
	text-shadow:none;
}

jQuery

Подключим необходимые нам файлы:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="colortip-1.0/colortip-1.0-jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

Займемся нашим плагином:

(function($){
	$.fn.colorTip = function(settings){

		var defaultSettings = {
			color		: 'yellow',
			timeout		: 500
		}

		var supportedColors = ['red','green','blue','white','yellow','black'];

		settings = $.extend(defaultSettings,settings);

		/*
		*	пробегаем по всем элементам страницы
		*/

		return this.each(function(){

			var elem = $(this);

			// Если аттрибута title нет, продолжаем
			if(!elem.attr('title')) return true;

			// Создаем новый объект Tip для найденного элемента.
			// (Объявление класса - ниже).

			var scheduleEvent = new eventScheduler();
			var tip = new Tip(elem.attr('title'));

			// Добавляем разметку подсказки
			// и цвет по-умолчанию (yellow):

			elem.append(tip.generate()).addClass('colorTipContainer');

			// Проверка на правильность заданных классов

			var hasClass = false;
			for(var i=0;i<supportedColors.length;i++)
			{
				if(elem.hasClass(supportedColors[i])){
					hasClass = true;
					break;
				}
			}

			// если класс задан, он переопределит стандартный

			if(!hasClass){
				elem.addClass(settings.color);
			}

Наш плагин имеет настройки — color и timeout первое — это стандартный цвет, timeout это время после которого исчезнет наша подсказка после отведения курсора.

		// при наведении - показать подсказку
		// при отведении - спрятать через полсекунды.

		elem.hover(function(){

			tip.show();

			scheduleEvent.clear();

		},function(){

			scheduleEvent.set(function(){
				tip.hide();
			},settings.timeout);

		});

		// удаляем стандартный аттрибут title

		elem.removeAttr('title');
	});

}

/*
/	Event Scheduler Class Definition
*/

function eventScheduler(){}

eventScheduler.prototype = {
	set	: function (func,timeout){

		this.timer = setTimeout(func,timeout);
	},
	clear: function(){

		clearTimeout(this.timer);
	}
}

Класс Tip

	/*
	/	Tip Class Definition
	*/

	function Tip(txt){
		this.content = txt;
		this.shown = false;
	}

	Tip.prototype = {
		generate: function(){

			return this.tip || (this.tip = $('<span>'+this.content+
											 '<span></span><span></span></span>'));
		},
		show: function(){
			if(this.shown) return;

			this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
			this.shown = true;
		},
		hide: function(){
			this.tip.fadeOut();
			this.shown = false;
		}
	}

})(jQuery);

Осталось вызвать наш плагин для создания подсказок. Код для этого будет храниться в файле script.js

$(document).ready(function(){

	/* добавляем подсказки ко всем аттрибутам title: */

	$('[title]').colorTip({color:'yellow'});

});

Наши подсказки готовы! Также посмотрите урок «CSS3 меню» с всплывающими при наведении подпунктами.