Хаки и Скрипты Next Generation CMS

Скрипт всплывающие подсказки (Tooltips)

irbees2008 irbees2008 Опубликовано - 5 - июля Tooltips
4094 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt

Скрипт всплывающие подсказки (Tooltips)
Установка
1. JS:
Устанавливаем перед тегом

Код:
</head>
следующий скрипт:
Код:
<script type="text/javascript" src="{tpl_url}/js/unitip.js"></script>

2. Html:
Теперь чтобы наш title отображался у нужного нам элемента, например нужной ссылки, следует прописать ей class="tip":
Код:
<a class="tip" href="#" title="Частная коллекция готовых дизайнерский решений, для вашего сайта или чата.">хаки и скрипты</a>

3. CSS:
Так как наша подсказка отображается отдельными изображениями, в css стилях давайте их пропишем:
Код:
/* unitip css */  
#unitip {
position: absolute;
z-index: 1000;
top: -1000px;
color: #fff;
font:11px Verdana,Arial,Helvetica, sans-serif; color:#CED9E8;
display: none;
}

#unitippoint, #unitipmid, #unitipcap {
position: relative;
top: 0px;
left: 0px;
width: 145px;
display: block;
}

#unitippoint {
background: url('../images/TipPoint.png') no-repeat;
height: 19px;
overflow: hidden;
}

#unitipmid {
background: url('../images/TipMid.png') repeat;
width: 115px;
height: auto;
padding: 5px 15px;
}

#unitipcap {
background: url('../images/TipCap.png') no-repeat;
height: 7px;
overflow: hidden;
}
4.скачать архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. и залить содержимое в папку с шаблоном
5.Ну немного о настройках:
1.По умолчанию UniTip использует png изображения.
2.Первый набор переменных в коде javascript определяет, когда будет использоваться подсказка:
1.var uniTipTag = "a,img"; - Определяются теги к которым будет использован tooltip. Отделять запятой и без пробела.
2.var uniTipClass = "TipEx"; - Определяются классы к которым будет применяться tooltip. Если класс не указан, то tooltip будет использован для всех тегов указанных выше.
3.Второй блок переменных определяет смещение курсора:
1.var uniTipX = 0; - Горизонтальное смещение курсора.
2.var uniTipY = 15; - Вертикальное смещение курсора.
Теперь можно добавить содержимое для самой подсказки в атрибуты title для ссылок, и alt для изображений. При использовании HTML в подсказках возможна некоторая задержка при появлении,ну вроде все пользуемся.

Можешь почитать и вот эту статейку "Настраиваем плагин News avatar info"

Опрос

Ваше мнение

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

Последние комментарии

Обновленное

Теги

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

Статистика

  • Caйту: 4781 день
  • Новостей: 612
  • Комменты: 257
  • Зарегистрированно : 734
  • Онлайн всего: [13]
  • Гости: [12]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 35
  • Генерация страницы: 0.434сек
  • Потребление памяти: 5.176 Mb 
  •   Яндекс.Метрика