Создание подсказки для ссылки на чистом HTML+CSS

Стандартная всплывающая подсказка указываемая в атрибуте 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.

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