Оригинал статьи

[показать]


Стандартная всплывающая подсказка указываемая в атрибуте title смотрится довольно уныло и ее нельзя настроить. Можно создать красивые подсказки с помощью Java скриптов, но если у вас нет желания использовать JavaScript, то можно сделать то же самое с помощью HTML+CSS.

Итак начнем, так выглядит HTML код:

<p class="tt">
Текст <a class="tooltip" href="#">Ссылка
<span>Подсказка для ссылки</span></a>.
</p>

Сначала создадим класс tt для параграфа <p>:

p.tt {
position: relative;
}

В принципе здесь ничего кроме позиционирования нету. Кстати если не установить position:relative для <p> в котором находится ссылка, то в Опере работать не будет.

Затем создадим класс tooltip, для ссылки :

a.tooltip:hover {
background:#FFF;
text-decoration:none;
}

Здесь следует отметить что без background color подсказка не будет работать в IE6.

Пишем стиль для <span> который будет у нас работать подсказкой:

a.tooltip span {
display:none;
width:150px;
text-align: center;
}

Первой строкой мы его скрываем, второй устанавливаем его ширину и третьей выравниваем текст внутри него по центру.

Пишем стиль для <span> при наведении курсора мыши на ссылку:

a.tooltip:hover span {
display:block;
position:absolute;
z-index: 100;
top: -3em;
left: 15px;
border: 1px solid #B14A05;
background: #F0CA87;
color:#000;
}

Здесь мы показываем <span>, затем позиционируем его абсолютно, после этого ставим z-index:100 чтобы подсказка показывалась всегда поверх остальных элементов, смещаем выше и правее, ну и украшаем немного.

Вот и все. Проверял в IE6, Firefox 2.0.0.14, Opera 9.20.

Здесь можно посмотреть пример.