Анимационное подчеркивание Каскадные таблицы стилей (преимущества и недостатки)

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

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

HTML

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

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

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

CSS

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

a.tt span{<br />
display:none;/*собственно прячем тултип - пока мышь не наведена*/<br />
}<br />
a.tt:hover{<br />
position:relative;/*Ставим точку отсчета для тултипа внутрь данной ссылки*/<br />
z-index:23;/*это нужно что бы тултип показывался поверх этой и других ссылок*/<br />
}<br />
a.tt:hover span{<br />
display:block;/*показываем тултип при наведении*/<br />
position:absolute;<br />
top:-10px;<br />
left:40px;/*три строки для позиции тултипа относительно левого верхнего угла ссылки*/<br />
z-index:22;/*мне 22 + см. выше*/<br />
background:#fafafa;/*фон, что бы было видно тултип*/<br />
}

Вот собственно и все. Остальное украшательсво. Рабочий пример минимально приукрашенный.

Конец

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

Добавить в:
Google slashdot YahooMyWeb Digg Technorati Delicious Забобрить эту страницу! Добавить на Newsland.ru Добавить на СМИ2 Добавить на Ваау! Добавить на RUmarkz Добавить на rucity.com Добавить в закладки МоёМесто.ru

Css Дизайнер (designer)

Постоянные ссылки

При копировании ссылка на Заметки дизайнера обязательна!

URI

Html (ЖЖ)

BB-код (Для форумов)

Написать коммент

Вы должны войти, чтобы оставить коммент.

Trackback на эту запись  |  Комменты по RSS


Рекламка в тему

Рубрики

Архив по месяцам

Друзья

Мета