Встречается порой необходимость пояснить текст или ссылку подсказкой, а писать пояснение рядом не хочется. Стандартные альты и тайтлы в html малофункциональны, а с помощью css всплывающий блок можно настроить на любой вкус и цвет.
В данном случае, подсказка отобразится при наведении на ссылку.
HTML:
CSS:
z-index:1;
text-decoration: none;
}
a:hover{
position:relative;
}
a span{
display:none;
width: 150px;
}
a:hover span{
display:block;
position:absolute;
float:left;
bottom: 15px;
left:10px;
background:#FFFF00;
border:1px dotted black;
color:#444;
padding:2px;
z-index:2;
}
Z-индексы настроены для того, чтобы подсказка не заползала под текст ссылки, а отображалась поверх. Декорации убраны, чтобы скрыть подчеркивание ссылки, ибо оно наследуется на span и там текст так же подчеркивается… Как избавиться от этого лишь у span, я пока не нашел. Position настроено с тем, чтобы span позиционировался относительно текста ссылки.
Display: none скрывает span, когда над ссылкой нет курсора мыши. Цвета, рамки, шрифты - на свой вкус.
