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

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

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

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

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

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

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

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

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

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

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

Выглядит это так.

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

  1. Загрузить скрипт с блога автора.
  2. Поместить содержимое загруженной директории в корневую директорию своего сайта на хостинге.
  3. Подключить script.js и style.css к вашему сайту. Для этого Вам необходимо между тегами <head>...</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('<strong>Подсказка!!!</strong>
    Это отличное решение!');" onmouseout="tooltip.hide();">Анкор ссылки</a>

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

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

P.S. Для небольшого проекта может подойти один из самых дешевых хостингов, но если Вы владелец проекта с многотысячной посещаемостью, то Вы просто обязаны взять в аренду сервер. К тому же выделенный сервер - это банальная забота о своих посетителях.

Комментарии:

Имя
e-mail
Сайт
Текст комментария: