Всплывающие подсказки на JS

Всплывающие подсказки на JS

Для того, чтобы скрыть ненужные элементы сайта, убрать большое изображение или длинное полотно текста, человечеством придумано замечательно web-решение – спойлер. Но спойлер не всегда хорош, так как для того, чтобы посмотреть что будет под ним, нужно на него кликнуть. Иногда для посетителя проще просто навести мышкой на ссылку и посмотреть скрытый элемент.

Для этого есть замечательное решение – всплывающие подсказки.

Всплывающие подсказки на HTML

Самые элементарные всплывающие подсказки можно сделать простым HTML, благо в нем есть такой тег как <abbr>. Синтаксис этого тега имеет вид:

<abbr title="Всплывающая подсказка">Анкор ссылки</abbr>

Все отлично работает, но есть два существенных минуса:

  • подсказка всплывает только через некоторое время;
  • нельзя в подсказке размещать HTML-теги (они будут отображаться в виде текста).

Короче, в топку этот метод, но он имеет право на жизнь.

Всплывающие подсказки на JS

На JS можно сделать очень хорошие подсказки, которые будут делать все что не умеет HTML-метод.

Это решение я нашел не сам, а честно позаимствовал у Майкла Лейгебера. Чтобы воспользоваться этим скриптом, необходимо:

  1. Загрузить скрипт с блога автора.
  2. Поместить содержимое загруженной директории в корневую директорию своего сайта на хостинге.
  3. Подключить script.js и style.css к вашему сайту. Для этого Вам необходимо между тегами <head&#62…</head> добавить 2 строки:
    <script src="script.js" type="text/javascript"></script>
    <link media="screen" rel="stylesheet" type="text/css" href="style.css" />
  4. В том месте где Вы хотите вывести подсказку с помощью JS, Вам нужно к ссылке добавить код:
    onmouseover="tooltip.show('Сама подсказка!!!');" onmouseout="tooltip.hide();"

    то есть должно получится так:
    <a href="/" onmouseover="tooltip.show('Подсказка!!! Это отличное решение!');" onmouseout="tooltip.hide();">Анкор ссылки</a>

Самое офигительное в этом еще и то, что все это дело будет работать без дополнительного подключения jQuery и будет нагружать ваш сайт всего-лишь на 2 килобайта.

Один минус в этом есть: нельзя вставить картинку в вашу подсказку.

Комментарии
Имя
e-mail
Текст комментария: # ×


Комментарии
Облако тегов
Интересное