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

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

irbees2008 irbees2008 Опубликовано - 5 - июля Tooltips
2754 - 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 в подсказках возможна некоторая задержка при появлении,ну вроде все пользуемся.

Можешь почитать и вот эту статейку "Прелоадер с затемнением фона"

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [9]
  • Гости: [8]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 33
  • Генерация страницы: 0.979сек
  • Потребление памяти: 4.943 Mb 
  •   яндекс.ћетрика