Простейший 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 Просмотров 7860 Ссылка на оригинал Tweet it!
6 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> внутрь ссылок :)
 

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

user

2012.02.05

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

Email

Сообщение