Простейший 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

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

Пример

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

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

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

Опубликовано: 30.12.2009 Просмотров 35437 Ссылка на оригинал Tweet it!
9 comments  

Виктор

2010.08.03 14:58

 Спасибо! Пригодился урок очень! для игрового сайта в самый раз,наводишь ка картинку игры и в тултипе описание,еще раз Спасибо!!!
 

Анатолий

2010.12.02 21:25

 А как применить для элемента который содержит hover?
 

Константин

2010.12.08 11:09

 Для Chrome и Safari важно указать "display:inline-block" для ссылки. В примере есть, а в коде примера - нет. ;)
 

Мария

2011.06.20 19:38

 Не подскажете, можно ли сдеелать так, что бы при наведении курсора на ссылку вблизи верхнего края страницы подсказка выплывала вниз, а вблизи нижнего края страницы - наверх.
 

basilkot

2011.06.21 02:45

  • сомневаюсь что это возможно на чистом CSS. проще задействовать javaScript/jQuery.

Кирилл

2011.10.07 07:49

 Почему же нельзя на CSS?

Для примера:
#header a span:hover {/*позиционировать ниже ссылки*/}
#right-column a span:hover {/*позиционировать слева от ссылки*/}
 

Кирилл

2011.10.07 07:52

 Пардон, правильнее так
#header a:hover span {/*позиционировать ниже ссылки*/}
#right-column a:hover span {/*позиционировать слева от ссылки*/}

И можно класс tooltip вообще не добавлять, мало кто в здравом рассудке добавляет <span> внутрь ссылок :)
 

Фома

2012.04.27 11:02

 А я думал придётся js ставить. Спасибо,
оказывается, можно-таки объять необъятное... ;)
Очень толковые статьи даже мне, скоро уже 60-летнему, интересны и полезны.
Занятия дизайном и версткой увлекательны и поучительны, логичны и порой непредсказуемы - помогает лучше всяких таблеток.
 

Eugene

2013.01.30 18:16

 Еще необходимо добавить:

a.tooltip {
position: relative;
}
 

коля

2014.11.02 19:38

 спасибо. Только после вашего урока доперло многое в CSS.
 

Оставить после себя комментарий

user

2016.10.07

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!