Главная » jQuery » Простые подсказки с CSS и JQuery

Простые подсказки с CSS и JQuery

Всем снова здравствуйте.
для ссылок, изображений или отрывков текста, все больше и больше становятся востребованы при организации будь то блога или сайта. В очередной раз и я обратил свое внимание на интересный способ создания простых подсказок с помощью и .
Простыми подсказки обозвал не из за их скромного оформления, внешний вид получился даже очень привлекательный, благодаря новым возможностям применения CSS. Простые подсказки получились в плане их исполнения и вывода на страницах сайтов.
В отличии от предложенного ранее способа в статье Свой стиль для подсказки с помощью jQuery, сегодняшний метод отличается быстротой реагирования при наведении на объект и расширенным кругом применения.
 
Простая подсказка

Из примера видно, что подсказку можно использовать практически для любого объекта на страницах сайта. Привлекает возможность вставки изображения в поле подсказки, что намного увеличивает информационную составляющую подсказки.

Теперь давайте непосредственно разберем сам принцип создания такой подсказки, посмотрим на разметку в HTML, вариации со стилями и подключаемыми jQuery плагинами.

Разметка — HTML

Я хотел сохранить разметку как можно более простой, но в то же время достаточно гибкой, чтобы использовать различные сценарии. Основное звено будет иметь класс .tip_trigger, который будет отвечать за инициирование (активацию) нашей подсказки, и класс .tip, отвечающий за вывод содержания внутри подсказки.
 

<a class="tip_trigger" href="#">Отрывок Текста<span class="tip">Объяснить можно все что угодно</span></a>

 
Как видим, ничего сложного и ни какого нагромождения лишнего кода.

CSS

С помощью стилей сформируем внешний вид подсказки и определим позиции вывода на страницах сайта. Дизайн невероятно просто, есть место для полета фантазий и экспериментов для собственных проектов. Подсказка по умолчанию скрыта, с помощью jQuery будет показана в режиме наведения на объект. Устанавливаем абсолютное позиционирование и z-index от 1000, чтобы подсказка отображалась поверх остальных элементов страницы.
 

.tip {
    color: #fff; /*--Цвет текста--*/
    background:#1d1d1d; /*--Фон тела подсказки--*/
    display:none; /*--По умолчанию скрыта--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px; /*--Закругленные углы--*/
    -moz-border-radius: 3px;
    border-radius: 3px;
}

 
Правда все очень просто? Заметьте, простота оформления через CSS, дает возможность сформировать практически любой внешний вид подсказки.

Магия jQuery

Для того чтобы наша подсказка заработала, необходимо подключить к документу jQuery файл, куда уж без этой волшебной библиотеки. Вы можете скачать файл непосредственно с сайта jQuery, или использовать размещенный на серверах Google, для чего у себя в документе между тегами <head> и </head> пропишите следующее:
 

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

 
И это еще не все, после строки где вы разместили ваш jQuery, необходимо прописать небольшой код javascript, который в связке с jQuery, будет отвечать за функциональность нашей подсказки. Для того чтобы было понятно, что мы делаем, я записал некоторые пояснения к функциям и параметрам javascript, надеюсь в дальнейшем это облегчит вам работу по настройке показа подсказки:
 

$(document).ready(function() {
	//Подсказка
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Показать подсказку
	}, function() {
		tip.hide(); //Скрыть подсказку		  
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; //Получить X координаты
		var mousey = e.pageY + 20; //Получить Y координаты
		var tipWidth = tip.width(); //Найти ширину подсказки
		var tipHeight = tip.height(); //Найти высоту подсказки
 
		//Расстояние до элемента от правого края окна
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Расстояние до элемента от нижнего края окна 
		var tipVisY = $(window).height() - (mousey + tipHeight);
 
		if ( tipVisX < 20 ) { //Если подсказка превышает X координату окна
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //Если подсказка превышает Y координату окна
			mousey = e.pageY - tipHeight - 20;
		} 
		tip.css({  top: mousey, left: mousex });
	});
});

 
Простые подсказки для сайта

 
Вот и все, проделав эти не хитрые манипуляции, если возникнет желание, немного поэкспериментируя, вы получите отлично работающую, без каких либо задержек и легко настраиваемую подсказку для любых объектов на страницах ваших сайтов. За отправную точку при создании и html — разметки ваших подсказок,можете запросто использовать исходный код страницы с примером:

 
Источник: Soh Tanaka, за что ему огромное спасибо.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »