Простой тултип или всплывающая подсказка
15 Feb, 2006Довольно часто применяю этот простой прием, но еще о нем не рассказывал. Суть - при наведении мыши на определнный текст появляется краткое пояснение или расширенная информация рядом с текстом. Вот пример(и пример для оперы - оговорка одна - тултипы не должны перекрывать другие "тултипные" ссылки).
HTML
Так как :hover пока в ИЕ к сожалению поддерживается только для элемента a(ссылок) то вынужденный код - такой:- <a class="tt" href="#"> Текст ссылки
- <span>Пояснение к ссылке </span>
- </a>
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 числа календаря
- Почти идентичный по реализации - но другой по внешнему виду прием от Эрика Мейера
Попап имеет вредное свойство "залипать" в Опере. Точнее это Опера имеет вредное свойство оставлять попап видимым даже после отвода мышки от ссылки. Вредное свойство проявляется далеко не всегда.:-)
42 комментариев к “Простой тултип или всплывающая подсказка”