Хаки и Скрипты Next Generation CMS : Tooltips, Интерфейс : Скрипт всплывающие подсказки (Tooltips)

irbees2008 Опубликовано - 5 - июля Tooltips

Адаптировал: 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 в подсказках возможна некоторая задержка при появлении,ну вроде все пользуемся.

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

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

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