Описание qTip!
Подсказки qTip поддерживают следующие возможности:
поддержка всеми популярными браузерами - IE 7+,FF 6.0+, Opera 10.0+,Safari 5.0 +, Google Chrom (не проверял)
поддержка закруглённых углов;
всплывающие подсказки передвигаются вместе с передвижением курсора;
позиционирование индикатора;
изменяемость стилей подсказки;
подсказки не перекрывают друг друга при нахождении в стеке;
установка эффектов отображения подсказок, подсказки могут плавно отображаться, при использовании соответствующих настроек;
динамически загружаемое содержимое методом jquery ajax;
поддержка изображений;
поддержка видео от youTube;
подробная документация на английском;
Для установки и использования qTip нам понадобится один файл jquery.qtip-1.0.0.min.js, т.к. в DLE основной файл jQuery уже подключен. Указанный файл по умолчанию находится в архиве на сайте разработчиков, однако, в дополнение к этому файлу Вы можете скачать дополнительные файлы – неминимизированные файлы js, так же на сайте разработчиков. Подключите указанный файл в вашем шаблоне в файле main.tpl перед закрывающимся тегом /head:
<script type="text/javascript" src="/jquery.qtip-1.0.0.min.js"></script>
после него, ниже добивать
<script>
jQuery(function(){
$('a[title]').qtip({ style: {
width:150, //ширина подсказки
border: {
width: 3,
radius: 8,
color: '#FFEFF4' //цвет подсказки
},
tip: true }
})
});
</script>
jQuery(function(){
$('a[title]').qtip({ style: {
width:150, //ширина подсказки
border: {
width: 3,
radius: 8,
color: '#FFEFF4' //цвет подсказки
},
tip: true }
})
});
</script>
по идее все! Вам только осталось в ссылках указать title="" и при наведении на ссылку она будет иметь вид
Объекты метода qtip
В метод qtip() допустимо передавать объекты, подробная информация о параметрах содержится на странице официального руководства. Объяснять все из них я не буду, ниже, Вы найдёте примеры применения данных объектов.
Show - объект, настраивающий параметры отображения подсказки
Hide - объект, настраивающий параметры сокрытия подсказки
Position - объект, настраивающий расположение подсказки;
Content - объект, определяющий тип содержимого подсказки;
Style - объект, отвечающий за стиль подсказки
P.S. Это моя первая новость на сайте, не судите строго=) Ребят, если будет интересно данный метод, потом могу поколдовать с другими методами и выложить наиболее интересные сюда.
Теги: 
Главная
