S3.Blog

Принцип tooltips заключается в обработке у всех элементов (за исключением тех, что указаны в настройке skip_tags) атрибутов title и alt таким образом, что при наведении «мышки» над элементом страницы с одним из этих атрибутов будет появляться нестандартная всплывающая подсказка. Она полностью настраивается через CSS (элемент #tooltip).

Автором скрипта является Paul Sowden, а внес в него существенные поправки Александр Шуркаев.

Преимущество описываемого варианта tooltip'а над другими в том, что он полностью совместим со старыми браузерами. То есть, он не вызовет в них никаких ошибок — все атрибуты title и alt будут показываться в старых браузерах стандартным образом.

Настройки минимальны:

options: {
	// наименование создаваемого tooltip'ого атрибута 
	attr_name: "tooltip", 

	// текст для ссылок с target="_blank" 
	blank_text: "(откроется в новом окне)", 

	// укажите пустую строку (""),
	// если не хотите использовать в tooltip'ах многострочность;
	// ежели хотите, то укажите тот символ или символы,
	// которые будут заменяться на перевод строки 
	newline_entity: " ", 

	// максимальная ширина tooltip'а в пикселах;
	// обнулите это значение, если ширина должна быть нелимитирована 
	max_width: 0, 

	// задержка при показе tooltip'а в миллисекундах
	delay: 100, 

	// теги, у которых не обрабатываем атрибуты alt и title 
	skip_tags: ["link", "style"] 
},

Теперь необходимо настроить вид подсказки. CSS элемент tooltip в моём случае выглядит так:

#tooltip{
	background: #ffffff;
	border:1px solid #666666;
	color: #333333;
	opacity: 0.91;
	filter: alpha(opacity="91");
	z-index:100;
	margin:0px;
	padding: 3px;
	position: absolute;
	visibility: hidden;
}

Посмотреть скрипт в действии вы можете, подведя мышку к этой ссылке: демонстрация работы tooltips.

Скачать скрипт: tooltips.zip

По материалам: Всплывающая подсказка (tooltip) с использованием DOM