• 1323
  • 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

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

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

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element