jQuery Tooltip - всплывающая подсказка от Soh Tanaka

Оригинал статьи: Soh Tanaka СС-лицензия:

Опубликовано 31.10.10 / Автор перевода: Иван Саломатин

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

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

Live Example

HTML-разметка

Для большей наглядности я использую предельно простую разметку, которая, в то же время, достаточно гибкая для того, чтобы использовать её так, как вам потребуется.

Основной ссылке присваиваем класс «tip_trigger», который будет служить пусковым крючком для нашего сценария, и класс «tip» присваиваем объекту, который должен быть показан пользователю при наведении курсора на ссылку.

<a href="#" class="tip_trigger">Ссылка
	<span class="tip">Содержимое подсказки</span>
</a>

CSS-стили

CSS-стили тоже приведу наипростейшие, дабы дать простор вашей фантазии при реализации собственного сценария.

По-умолчанию подсказка скрыта, когда же курсор на водится на ссылку с классом «tip_trigger», jQuery показывает нам её содержимое.

Мы используем для подсказки абсолютное позиционирование (position:absolute;) и z-index равный 1000, дабы быть уверенными в том, что подсказка будет показании поверх всех прочих элементов страницы.

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*-- Скрываем подсказку --*/
    padding:10px;
    position:absolute;
    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

jQuery – немного волшебства

Тем, кто до сих пор не знаком с jQuery, обязательно следует перво-наперво посетить официальный сайт фреймворка, дабы иметь представление о том, как он работает.

Первый шаг – подключаем библиотеку jQuery

Тут на ваш выбор возможно несколько вариантов:

– вы можете загрузить библиотеку jQuery с официального сайта фреймворка и разместить её на своём хосте;

– использовать файл, размещённый в гуглохранилище

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

– но, дабы не приходилось регулярно обновлять файл библиотеки при выходе новых её версий, я бы рекомендовал вам подключать файл, расположенный на хостинге оф.сайта jQuery, который регулярно обновляется

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Сразу после строки вызова библиотеки jQuery, начинаем новый сценарий (конечно, можно этот сценарий вынести и в отдельный файл – как вам будет удобнее):

$(document).ready(function() { // Приступаем к обработке сценария, когда DOM готов
    // Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Показать подсказку
    }, function() {
        tip.hide(); //Скрыть подсказку
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Получаем координаты по оси X
        var mousey = e.pageY + 20; // Получаем координаты по оси Y
        var tipWidth = tip.width(); //Вычисляем длину подсказки
        var tipHeight = tip.height(); // Вычисляем ширину подсказки
		//Определяем дистанцию от правого края окна браузера до блока, содержащего подсказку
		var tipVisX = $(window).width() - (mousex + tipWidth);
        // Определяем дистанцию от ниждего края окна браузера до блока, содержащего подсказку        
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //Если ширина подсказки превышает расстояние от правого края окна браузера до курсора,
            mousex = e.pageX - tipWidth - 20; // то распологаем область с подсказкой по другую сторону от курсора
        } if ( tipVisY < 20 ) { // Если высота подсказки превышает расстояние от нижнего края окна браузера до курсора,
            mousey = e.pageY - tipHeight - 20;  // то распологаем область с подсказкой над курсором

        }
        //Непосредственно присваиваем найденные координаты области, содержащей подсказку
        tip.css({  top: mousey, left: mousex });
    });
});

Логика

Считываем положение элемента с селектором .tip в кешь

Определяем местоположение элемента и записываем в кешь его положение командой $(this).find('.tip').

Определяем событие (Hover In и Hover Out)

Если курсор располагается над элементом с классом «tip_trigger», показываем элемент с селектором .tip, иначе – скрываем элемент.

Mouse Over

Когда курсор помещается над ссылкой, начинаем вычислять его координаты, используя методы e.pageX и e.pageY. Обратите внимание на то обстоятельство, что тут мы добавляем к координатам 20 px, дабы подсказка не «прилипала» к указателю курсора.

Создаём переменные

Также, нам следует учесть ситуации, когда размеры подсказки превышают размер свободного пространства от курсора до краёв окна браузера. Когда это происходит, нам следует переместить подсказку по другую сторону от курсора. Чтобы определить, следует ли перекидывать подсказку, нам требуется точно знать ширину и высоту подсказки (tipWidth и tipHeight).

Если размеры подсказки превышают размеры свободного пространства от курсора до правого и нижнего краёв окна браузера

Если размеры подсказки слишком велики, следует «перебросить» подсказку по другую сторону от курсора. Новые координаты местоположения подсказки в этом случае вычисляются за счёт вычитания из общего размера окна размеров подсказки и соответствующего отступа (20px) для ширины и высоты соответственно.

По-умолчанию…

Если размеры подсказки позволяют, то подсказка будет расположена справа снизу от указателя курсора.

Live Example

Как вы видите, в приведенной функции неразрывно связаны два события: .hover() и .mouseover() (рекомендую воспользоваться документацией к фреймворку, чтобы поближе познакомиться с каждым из них и понимать их различия).