2013
01
Дек

Как сделать всплывающую
      подсказку на jQuery



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

Немного об этой подсказке. Подсказка отображается по клику мышки и при наведении курсора. Используется не только текст, но и изображения. С помощью подсказки можно делать ссылку. Cвойства стилей CSS помогут изменить фон, цвет и текс подсказки.

Для того, чтобы продолжить работу скачайте архив файла SimpleTip. В этом архиве вы найдете файл CSS, скрипты для работы подсказки, индексный файл, папку с рисунками.

Разархивируйте файл и разместите папку SimpleTip в корне сайта. Подключите скрипты и стили на странице (не забывайте правильно указывать путь к файлам).


jQuery скрипт для всплывающей подсказки


Ниже приводится файл clickTip.js. Скрипт помогает правильно позиционировать подсказки, добавляет нужные классы и способ появления. Посмотрите на скрипт и пояснения в нем.

$(function() { $('a.linktip').wrap('<span class="tip" />'); //оборачиваем соответствующие элементы в контейнер $('span.tip').each(function(){ myTip = $(this), tipLink = myTip.children('a'), tBlock = myTip.children('span').length, //подсчитываем дочерние SPAN элементы внутри контейнера tTitle = tipLink.attr('title') != 0, //определяем наличие тега TITLE tipText = tipLink.attr('title'); //берем текст из тега TITLE tipLink.removeAttr("title"); //скрываем обычный TITLE //условие - если внутри нет доч. SPAN и есть TITLE, //добавляем соответствующий SPAN с текстом взятым из TITLE if(tBlock === 0 && tTitle === true){myTip.append('<span class="answer">' + tipText + '</span>')}; var tip = myTip.find('span.answer , span.answer-left').hide(); //найдем и скроем блоки с подсказками //при наличии у ссылки тега EM подсказка будет появляется по клику //также сразу добавим и "крестик" закрытия tipLink.has('em').click(showTip).siblings('span').append('<b class="close">X</b>'); //если тега EM нет, подсказка будет появляться при наведении курсора tipLink.not($('em').parent()).hoverIntent( showTip, function(){ tip.fadeOut(200);} ); //закрытие подсказки при клике на "крестик" tip.on('click', '.close', function(){ tip.fadeOut(200);} ); //функция вывода и появления подсказки на экран //вне зависимости от размеров окна, //наличия горизонтальной или вертикальной прокрутки //подсказка всегда будет в видимой области function showTip(e){ xM = e.pageX, yM = e.pageY, tipW = tip.width(), tipH = tip.height(), winW = $(window).width(), winH = $(window).height(), scrollwinH = $(window).scrollTop(), scrollwinW = $(window).scrollLeft(), curwinH = $(window).scrollTop() + $(window).height(); if ( xM > scrollwinW + tipW * 2 ) {tip.removeClass('answer').addClass('answer-left');} else {tip.removeClass('answer-left').addClass('answer');} if ( yM > scrollwinH + tipH && yM > curwinH / 2 ) {tip.addClass('a-top');} else {tip.removeClass('a-top');} tip.fadeIn(100).css('display','block'); e.preventDefault(); }; }); });/*конец*/

Размещение на странице HTML


Скрипт имеет три варианта использования.

1 - ССылке присвоен соответствующий класс. Текст подсказки расположен в TITLE, посказка повится при наведении курсора

<a class="linktip" href="#" title="Текст подсказки">Подсказка при наведении курсора</a>

Текст подсказки расположен в TITLE, помещаем его в тег EM и подсказка будет появлятся по клику.

<a class="linktip" href="#" title="Текст подсказки"><em>Подсказка по клику</em></a>

2 - Блок пишем в ручную, клик-подсказка будет отображаться и без скрипта. В этом случае меняем :focus на :hover

<span class='tip'><a tabindex="1"><em>?</em><a/><span class='answer'>Текст подсказки</span></span>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Роль кнопки выполняет тег <em>. Если его нет, ссылка отображается обычно. Для скрипта, он является фильтром отображения подсказки - при наведении курсора или по клику.