Підказка до ссылке з фоном з допомогою CSS

При створенні сайту часто виникає необхідність в тому, щоб відобразити підказки до посилань при наведенні на них. Це не примха творців, це часом необхідність, покликана поліпшити огляд сторінок і полегшити користувачам пошук потрібної інформації на сайті.

Уявляю вашій увазі відмінне рішення по створенню підказки до посилань з допомогою таблиць каскадних стилів CSS і невеликого Javascript:

Крок 1.

Насамперед розглянемо, з чого складається сама підказка, точніше сказати код її виконання.
Що б ця функція заробила вам необхідно вставити в сторінку перед закриваючим тегом пару рядків такого змісту:

<script type="text/javascript" src="BubbleTooltips.js">
<script type="text/javascript">window.onload=function(){enableTooltips()};

Крок 2.

Потім просто завантажити в корінь сайту файл стилів bt.css,
а так же файл картинки bt.gif в папку, де у вас знаходяться зображення, частіше вона обзивається типу img або images.
Ну і нарешті файл сценарію javascript BubbleTooltips.js теж вантажимо в корінь сайту або в папку з вашими сценаріями. Тільки в цьому випадку не забудьте прописати повний шлях до цього та інших файлів.

Крок 3

Файл bt.css:

.tooltip {
width:200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;
text-align:center;
}
.tooltip span.top {
padding:30px 8px 0;
background:url(bt.gif) no-repeat top;
}
.tooltip b.bottom {
padding:3px 8px 15px;
color:#548912;
background:url(bt.gif) no-repeat bottom;
}

За бажанням вигляд картинки підказки можете поміняти на свою, а саме файл bt.gif.
Властивості background:url(bt.gif) no-repeat top; прописаний шлях до вашої картинці, тут і поміняєте при необхідності.
І не забувайте, якщо міняєте розташування файлу то прописуйте правильний шлях до нього.

Крок 4

Посиланнях або уривку тексту, у яких ми хочемо бачити спливаючу оформлену підказку, необхідно привласнити елементам атрибут title, і вже в ньому прописати зміст підказки.
Виглядати це буде приблизно так:

<a title="БЛА БЛА БЛА БЛА БЛА БЛА" href="http://#site/" class="tt">Ваше посилання</a>

3аключение: Експериментуйте з формами і кольорами оформлення підказки, все у вас вийде.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: