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

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

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

Можешь почитать и вот эту статейку "Форматирование цифр по октетам на TWIGe"

Опрос

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

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

Теги

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

Статистика

  • Caйту: 4822 дня
  • Новостей: 616
  • Комменты: 257
  • Зарегистрированно : 755
  • Онлайн всего: [15]
  • Гости: [14]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.498сек
  • Потребление памяти: 5.475 Mb 
  •   Яндекс.Метрика