Вот нашел еще один вид подсказок (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>$(document).ready(function(){
$('a[title]').qtip();
});5.Настройки
$('a[title]').qtip({
position: {
my: 'bottom center',
//Положение курсора
at: 'top center',
//Положение всплывающей подсказки
viewport: $(window)
//Подсказка не будет вылизать за края экрана
}
});подключим файл jquery.qtip.min.css файл main.tpl перед закрывающимся тегом /head:
<link rel="stylesheet" href="{{ tpl_url }}/css/jquery.qtip.min.css">- qtip-default (желтый стиль по умолчанию)
- qtip-light
- qtip-dark
- qtip-red
- qtip-green
- qtip-blue
- qtip-youtube
- qtip-jtools
- qtip-cluetip
- qtip-tipsy
- qtip-tipped
- qtip-bootstrap
К некоторым из этих стилей можно добавить тень: qtip-shadow. К тому же, никто не мешает создать свой стиль, отлично сочетающийся с общим дизайном сайта, хотя и стандартных более чем предостаточно.
$('a[title]').qtip({
position: {
my: 'bottom center',
at: 'top center',
viewport: $(window)
},
style: {
classes: 'qtip-green qtip-shadow'
}
});Вам только осталось в ссылках указать title="" и при наведении на ссылку она будет иметь Вот такой вид
поддержка всеми популярными браузерами - IE 7+,FF 6.0+, Opera 10.0+,Safari 5.0 +, Google Chrom (не проверял)
поддержка закруглённых углов;
всплывающие подсказки передвигаются вместе с передвижением курсора;
позиционирование индикатора;
изменяемость стилей подсказки;
подсказки не перекрывают друг друга при нахождении в стеке;
установка эффектов отображения подсказок, подсказки могут плавно отображаться, при использовании соответствующих настроек;
динамически загружаемое содержимое методом jquery ajax;
поддержка изображений;
поддержка видео от youTube;
подробная документация на английском;
Объекты метода qtip
В метод qtip() допустимо передавать объекты, подробная информация о параметрах содержится на странице официального руководства. Объяснять все из них я не буду, ниже, Вы найдёте примеры применения данных объектов.
Show - объект, настраивающий параметры отображения подсказки
Hide - объект, настраивающий параметры сокрытия подсказки
Position - объект, настраивающий расположение подсказки;
Content - объект, определяющий тип содержимого подсказки;
Style - объект, отвечающий за стиль подсказки
Можешь почитать и вот эту статейку "Показываем пароль в поле ввода"
Это тоже интересно
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
ответить