S3.Blog

19 Марта 2024
A A A   RSS-лента
"Я знаю, что ничего не знаю, но многие не знают и этого". Сократ [?].

JavaScript: Tooltips - всплывающие подсказки

Дата последнего изменения: 18 Октября 2009
Метки статьи: Готовые решения, Фиксы & Хаки, JavaScript
Принцип 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



Похожие материалы:




Vitaliy (гость) • ответить
Ничего из примера не ясно (для чайника). Как этот скрипт применить? Куда этот код внедрять и как задествовать? Хотяб на примере Greasemonkey.
Из того что понял по коду - создаём объект-переменную-класс (смотря с какого языка смотреть) tooltip с настройками, а затем ... туман-туман, да и самой этой переменной ничего не ясно.
Вставляю этот код в локальный javascript, кладу рядом css... К стати в самом скрипте вообще не ясно с чего вдруг js будет брать или как-то задействовать css стиль, хотелось бы чётко указать, где это описано и что делать, если я хочу положить css в другую папку, а не рядом с js. В общем, после внесения кода в мой скрипт, tooltips вообще отказались появлятья (FF11).

P.S. А ещё у вас применение разметки криво реализовано: выбираем текст, жмём B и вместо того чтобы поставить теги по бокам - он затирает текст тегами.
Александрответить
быстрый запуск:
<link type="text/css" rel="stylesheet" href="/css/tooltips.css">
<script type="text/javascript" language="javascript" src="/js/tooltips.js"></script>


вот собственно и все подключение.
если в тэге есть alt или title то при наведении на него будет всплывающая подсказка
ramses (гость) • ответить
Отличный пост)))) давно искал нормальную всплывающую подсказку))) жаль на сайте нет рекламы, чтоб отблагодарить)))) спасибо чел.))))

 
 
  Имя *:   Решите пример *: =
 
Полужирный Курсив Подчеркнутый Перечеркнутый
 
Вставить изображение Сделать цитатой Вставить ссылку Вставить код

Вставить смайл
 
 

 



© S3.Blog: Если критикуешь, не предлагая решения проблемы, то ты становишься частью этой проблемы.