Скрипт всплывающие подсказки (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;
}
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 в подсказках возможна некоторая задержка при появлении,ну вроде все пользуемся.
Можешь почитать и вот эту статейку "теги и атрибуты HTML5"
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
