Простой тултип или всплывающая подсказка

HTML

Так как :hover пока в ИЕ к сожалению поддерживается только для элемента a(ссылок) то вынужденный код - такой:

  1. <a class=”tt” href=”#”> Текст ссылки
  2. <span>Пояснение к ссылке </span>
  3. </a>

Класс tt просто говорит о том что спан внутри таких ссылок будет отображаться по наведению мышки. Без CSS данная конструкция выглядит вполне логично. К тому же можно вспомнить о поисковой оптимизации и использовать вот этот прием.

CSS

Дело за малым - заставить это все работать  .
Вот такое простое CSS волшебство заставит тултип тултипиться  :

  1. a.tt span{
  2. display:none;/*собственно прячем тултип - пока мышь не наведена*/
  3. }
  4. a.tt:hover{
  5. position:relative;/*Ставим точку отсчета для тултипа внутрь данной ссылки*/
  6. z-index:23;/*это нужно что бы тултип показывался поверх этой и других ссылок*/
  7. }
  8. a.tt:hover span{
  9. display:block;/*показываем тултип при наведении*/
  10. position:absolute;
  11. top:-10px;
  12. left:40px;/*три строки для позиции тултипа относительно левого верхнего угла ссылки*/
  13. z-index:22;/*мне 22 + см. выше*/
  14. background:#fafafa;/*фон, что бы было видно тултип*/
  15. }

Вот собственно и все. Остальное украшательсво. Рабочий пример минимально приукрашенный + пример из жизни (даты 7 8 9 в календаре).

Конец

Оригинальная статья удалена

Добавить комментарий