Простой способ создания всплывающих подсказок

В данном небольшом уроке, я хочу поделиться с Вами одним достаточно простым, но в то же время кроссбраузерным способом создания всплывающих подсказок.

 Вы можете увидеть пример подсказки наведя курсор мыши на слово "кроссбраузерным"(в первом абзаце урока) .

При наведении на заданное слово, возле курсора появляется вопросительный знак, и через доли секунды всплывает заранее подготовленный текст подсказки к этому слову.

Сейчас в сети можно встретить массу способов создания всплывающих подсказок: одни из них, реализованы на JavaScript, другие - связаны со слоями в CSS, третьи - используют современный фреймворк Jquery. Да, возможно они более красивы, но как правило, есть проблемы с их отображением в различных браузерах.

Я предлагаю простой метод, основанный на использовании html-тега ACRONYM- который показывает, что текст, является сокращением. У данного тега, есть полезный атрибут - title - в котором, собственно, и содержится текст подсказки.

Пример:

 <acronym title="сокращение от Content Management System">CMS</acronym>

т.е. просто заключаем нужное слово в теги acronym, а в атрибуте title пишем подсказку к этому слову.

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

Все это делается через стили, буквально несколькими строчками. Итак, в файле CSS, который отвечает за оформление Вашего сайта, пишем следующее правило:

acronym {
 border-bottom: 1px dashed green; /* Подчеркивание текста */
 color: maroon; /* Цвет текста */
 cursor:help; /* Меняем стандартный курсор */
 }

 Ну вот в принципе и все! Пользуйтесь!