Пятница, 27.12.2024, 05:29
Приветствую Вас Гость

Меню сайта
Web-программирование
Категории раздела
Наш опрос
Какой браузер Вы используете?
Всего ответов: 1423
Статистика

Анализ веб сайтов
Главная » Статьи » Статьи o CSS

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

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;/*фон, что бы было видно тултип*/
}

Вот собственно и все. Остальное украшательсво. Рабочий пример минимально приукрашенный.
Категория: Статьи o CSS | Добавил: Rammstein (21.01.2011)
Просмотров: 791 | Рейтинг: 0.0/0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Реклама
Поиск
Друзья сайта
Топ100- Веб-дизайн free counters