Помните стандартную подсказку Title, которая всплывает когда вы наводите стрелку мышки на ссылку, конечно помните, такое нельзя пройти мимо, так вот существует не одно готовое решение, благодаря которому можно изменить внешний вид данной подсказки, нет мы не будем прописывать дополнительный тег <span> в который как правило прописывается подсказка к тому или иному элементу, я говорю именно об изменении внешнего вида title в ссылки, давайте посмотрим Демо и рассмотрим пример реализации.
DEMO
Cкачать скрипты
Шаг-1 JS:
Устанавливаем после тега body следующий скрипт:
Code
<script type="text/javascript" src="img/unitip.js"></script>
Шаг-2 Html:
Теперь чтобы наш title отображался у нужного нам элемента, например нужной ссылки, следует прописать ей class="tip":
Code
<a class="tip" href="#" title="Частная коллекция готовых дизайнерский решений, для вашего сайта или чата.">www.webik.at.ua</a>
Шаг-3 CSS:
Так как наша подсказка отображается отдельными изображениями, в css стилях давайте их пропишем:
Code
/* 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('img/TipPoint.png') no-repeat;
height: 19px;
overflow: hidden;
}
#unitipmid {
background: url('img/TipMid.png') repeat;
width: 115px;
height: auto;
padding: 5px 15px;
}
#unitipcap {
background: url('img/TipCap.png') no-repeat;
height: 7px;
overflow: hidden;
}
Всё наша подсказка теперь будет отображаться как и положено, главное не забудьте залить на свой сайт в нужную папку изображения подсказки.
