Создание подсказки для ссылки на чистом 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.
Здесь можно посмотреть пример.