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

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

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

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

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

Вот пример соответствующего тега:

<acronym title="Аббревиатура CMS расшифровывается
 как «Content Management Software» («программное
 обеспечение для управления содержимым»)">CMS</acronym>

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

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

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

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

Вот что мы получим в результате:

CMS

Спасибо за внимание! Пользуйтесь!

0 Комментариев