• 1206
  • 1
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Вот нашел еще один вид подсказок (Tooltips) qTip,это самый простой способ создания подсказок с помощью jQuery и qTip на мой взгляд ,если устанавливать на готовый или рабочий сайт.
Итак приступим
1.Для установки и использования qTip нам понадобится jQuery ,но он уже обычно подключен.
2.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем В папку с вашим шаблоном файлы jquery.qtip.min.js и scripts.js в директорию js, а файл стиля jquery.qtip.min.css в папку css.
3. Подключаем скрипты в вашем шаблоне в файле main.tpl перед закрывающимся тегом /head:

Код:
<script  src="{{ tpl_url }}/js/jquery.qtip.min.js"></script>
после него, ниже добавить
Код:
<script src="{{ tpl_url }}/js/scripts.js"></script>
4. Чтобы всплывающая подсказка заработала достаточно прописать в scripts.js:
Код:
$(document).ready(function(){
$('a[title]').qtip();
});
Эта конструкция означает, что для всех ссылок, у которых присутствует атрибут titleбудет применен метод qtip()
5.Настройки
position-qtip.jpg (8.8 Kb)

Код:
$('a[title]').qtip({
position: {
my: 'bottom center',
//Положение курсора

at: 'top center',
//Положение всплывающей подсказки

viewport: $(window)
//Подсказка не будет вылизать за края экрана

}
});
6.Вот настроили позиции, теперь займемся цветовой схемой отображения подсказки.
подключим файл jquery.qtip.min.css файл main.tpl перед закрывающимся тегом /head:
Код:
<link rel="stylesheet"  href="{{ tpl_url }}/css/jquery.qtip.min.css">
По умолчанию в файле jquery.qtip.min.css содержатся следующие цветовые стили:

- qtip-default (желтый стиль по умолчанию)
1356451393_qtip-default.jpg (31.01 Kb)
- qtip-light
1356451414_qtip-light.jpg (29.43 Kb)

- qtip-dark
1356451364_qtip-dark.jpg (30.06 Kb)

- qtip-red
1356451374_qtip-red.jpg (26.68 Kb)

- qtip-green
1356451443_qtip-green.jpg (28.73 Kb)

- qtip-blue
1356451359_qtip-blue.jpg (27.56 Kb)

- qtip-youtube
1356451390_qtip-youtube.jpg (40.32 Kb)

- qtip-jtools
1356451388_qtip-jtools.jpg (33.8 Kb)

- qtip-cluetip
1356451401_qtip-cluetip.jpg (31.33 Kb)

- qtip-tipsy
1356451387_qtip-tipsy.jpg (43.21 Kb)

- qtip-tipped
1356451377_qtip-tipped.jpg (33.85 Kb)

- qtip-bootstrap
1356451365_qtip-bootstrap.jpg (44.58 Kb)

К некоторым из этих стилей можно добавить тень: qtip-shadow. К тому же, никто не мешает создать свой стиль, отлично сочетающийся с общим дизайном сайта, хотя и стандартных более чем предостаточно.

Код:
$('a[title]').qtip({
position: {
my: 'bottom center',
at: 'top center',
viewport: $(window)
},
style: {
classes: 'qtip-green qtip-shadow'
}
});
4.Ну вот и все!
Вам только осталось в ссылках указать title="" и при наведении на ссылку она будет иметь Вот такой вид
поддержка всеми популярными браузерами - IE 7+,FF 6.0+, Opera 10.0+,Safari 5.0 +, Google Chrom (не проверял)
поддержка закруглённых углов;
всплывающие подсказки передвигаются вместе с передвижением курсора;
позиционирование индикатора;
изменяемость стилей подсказки;
подсказки не перекрывают друг друга при нахождении в стеке;
установка эффектов отображения подсказок, подсказки могут плавно отображаться, при использовании соответствующих настроек;
динамически загружаемое содержимое методом jquery ajax;
поддержка изображений;
поддержка видео от youTube;
подробная документация на английском;

Объекты метода qtip

В метод qtip() допустимо передавать объекты, подробная информация о параметрах содержится на странице официального руководства. Объяснять все из них я не буду, ниже, Вы найдёте примеры применения данных объектов.

Show - объект, настраивающий параметры отображения подсказки
Hide - объект, настраивающий параметры сокрытия подсказки
Position - объект, настраивающий расположение подсказки;
Content - объект, определяющий тип содержимого подсказки;
Style - объект, отвечающий за стиль подсказки

Можешь почитать и вот эту статейку "Делаем красивую пагинацию на сайте"

mistakes

Это тоже интересно

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

Ваше мнение

Как вам наш дизайн сайта?
Результаты

----