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

Я уже давно хотел написать более-менее большую статью про DOM Level 1 и 2. Как-никак, это очень хороший и нужный стандарт, поддерживаемый уже большинством браузеров. Как всегда с новыми технологиями, поддерживаемый не полностью, но и нынешней реализации достаточно для большинства задач.

Я почти начал писать статью, как наткнулся на замечательное описание основ DOM. Поэтому в данной заметке я просто наглядно продемонстрирую, как DOM+JavaScript работают на практике (в Internet Explorer 5+ и Netscape Navigator 6+/Mozilla).

Для этого подойдёт скрипт всплывающей подсказки, используемый на этом сайте. Скажу сразу, что я не являюсь автором этого скрипта, но внёс в него существенные поправки, некоторые из которых были учтены Полом Соуденом (Paul Sowden).

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

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

Смотрите и берите js-код без лишних комментариев. Настройки минимальны.

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

#tooltip{
background:#FFFFFF;
border:1px solid #666666;
color:#333333;
font:menu;
margin:0px;
padding:3px 5px;
position:absolute;
visibility:hidden
}

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

P. S. Уже после написания этой заметки я столкнулся с ошибкой, которая присутствовала в оригинальном скрипте. Проблема возникала в Internet Explorer 6 при указании «правильного» !DOCTYPE.

Дело в том, что при этом канвой документа считается не элемент body (как в ранних версиях IE), а элемент html (!). Поэтому проверка на compatMode позволяет правильно вычислять, например, свойства scrollLeft и scrollTop во всех версиях IE, начиная с версии 5.0:

var canvas = document.getElementsByTagName((document.compatMode && document.compatMode == "CSS1Compat") ? "HTML" : "BODY")[0];
alert(canvas.scrollLeft + "\n" + canvas.scrollTop);

Раньше, до появления IE 6, чтобы узнать «проскроленность» окна нужно было задействовать document.body.scrollLeft и document.body.scrollTop.

P. P. S. Чтобы добиться переносов в tooltip'е, в том месте, где вы хотите, чтобы появился перевод строки, поставьте те символы, которые указаны в свойстве newline_entity.
Кстати, если вы укажите в качестве значения этого свойства символ |, то в силу использования регулярных выражений, каждый символ в тексте tooltip'а будет выводиться на новой строке (на эту особенность указал Скакунов Александр).

P. P. P. S. Про Opera: скрипт работает начиная с 7-ки, но, alas, не во всех минорных версиях. Кроме того, скрипт не позволяет скрыть, например, показывание URL в системном tooltip'е. Эту опцию можно отключить только через настройки этого самого быстрого на свете браузера.