Простейший Tooltip используя CSS. - «Верстка»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Наш опрос



Наши новости

       
30-12-2009, 13:00
Простейший Tooltip используя CSS. - «Верстка»
Рейтинг:


Представленный tooltip действительно очень прост. Для его реализации не требуется javascript. Только CSS.



Описывать совершенно нечего, поэтому просто код:


CSS


a:hover {
background		: #ffffff;	/*необходимо для IE6*/
text-decoration	: none;
}
a.tooltip span {
display
: none;
padding
: 2px 3px;
margin-left		: 8px;
width
: 130px;
}
a.tooltip:hover span {
display
: inline;
position		: absolute;
background		: #ffffff;
border
: 1px solid #cccccc;
color
: #6c6c6c;
}


Теперь, чтобы добавить к ссылке подсказку, присвойте ей класс tooltip, а текст подсказки добавьте
в span-е внутри этой ссылки.


HTML


Простейший Tooltip<span>Вот такая подсказочка получилась :).</span>.

Пример



a:hover {
background : #ffffff; /*необходимо для IE6*/
text-decoration : none;
}
a.tooltip span {
display
: none;
padding
: 2px 3px;
margin-left : 8px;
width
: 130px;
}
a.tooltip:hover span {
display
: inline;
position : absolute;
background : #ffffff;
border
: 1px solid #cccccc;
color
: #6c6c6c;
}

Простейший TooltipВот такая подсказочка получилась :)..


Совместимость


Проверено с
IE5, IE 5.5, IE 6, IE7, Safari 3.1, последними версиями Firefox и Opera.


Представленный tooltip действительно очень прост. Для его реализации не требуется javascript. Только CSS. Описывать совершенно нечего, поэтому просто код: CSS Теперь, чтобы добавить к ссылке подсказку, присвойте ей класс tooltip, а текст подсказки добавьте в span-е внутри этой ссылки. HTML Пример a:hover _

Теги: CSS, span такая подсказочка {display: получилась

Просмотров: 2 408
Комментариев: 0:   30-12-2009, 13:00
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме: