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

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

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

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

Сейчас в сети можно встретить массу способов создания всплывающих подсказок: одни из них, реализованы на 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; /* Меняем стандартный курсор */
}

В результате получим следующее:

CMS

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