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

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

XHTML/CSS

Довольно часто применяю этот простой прием, но еще о нем не рассказывал. Суть – при наведении мыши на определнный текст появляется краткое пояснение или расширенная информация рядом с текстом. Вот пример(и пример для оперы – оговорка одна – тултипы не должны перекрывать другие “тултипные” ссылки).

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 в календаре).

Конец

Вот такой до боли простой приемчик, нередко довольно эффектно выглядящий.
Конечно ему не тягаться с тултипами гоняющимися за курсором мыши. Но и им по простоте с ним не тягаться. :)

• Мой пример
• Из одной из страниц кторые я верстал – навести мышь на 7-8-9 числа календаря
• Почти идентичный по реализации – но другой по внешнему виду прием от Эрика Мейера

Авось кому сгодится…

Попап имеет вредное свойство “залипать” в Опере. Точнее это Опера имеет вредное свойство оставлять попап видимым даже после отвода мышки от ссылки. Вредное свойство проявляется далеко не всегда.:-)

Вариант для оперы

XHTML/CSS