Простой тултип или всплывающая подсказка
HTML
Так как :hover пока в ИЕ к сожалению поддерживается только для элемента a(ссылок) то вынужденный код - такой:
- <a class=”tt” href=”#”> Текст ссылки
- <span>Пояснение к ссылке </span>
- </a>
Класс tt просто говорит о том что спан внутри таких ссылок будет отображаться по наведению мышки. Без CSS данная конструкция выглядит вполне логично. К тому же можно вспомнить о поисковой оптимизации и использовать вот этот прием.
CSS
Дело за малым - заставить это все работать .
Вот такое простое CSS волшебство заставит тултип тултипиться :
- a.tt span{
- display:none;/*собственно прячем тултип - пока мышь не наведена*/
- }
- a.tt:hover{
- position:relative;/*Ставим точку отсчета для тултипа внутрь данной ссылки*/
- z-index:23;/*это нужно что бы тултип показывался поверх этой и других ссылок*/
- }
- a.tt:hover span{
- display:block;/*показываем тултип при наведении*/
- position:absolute;
- top:-10px;
- left:40px;/*три строки для позиции тултипа относительно левого верхнего угла ссылки*/
- z-index:22;/*мне 22 + см. выше*/
- background:#fafafa;/*фон, что бы было видно тултип*/
- }
Вот собственно и все. Остальное украшательсво. Рабочий пример минимально приукрашенный + пример из жизни (даты 7 8 9 в календаре).
Конец
Оригинальная статья удалена