Создаем простой tooltips с помощью CSS и jQuery

http://www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery
  • Перевод
CSS tooltips очень популярны в современном веб дизайне, и вопреки широко распространенному мнению их довольно легко создать, особенно с помощью различных популярных javascript-framework-ов.

Вы, конечно, можете использовать стандартный плагин, но чтобы сделать простой tooltips, Вам достаточно написать всего 10 строк кода jQuery и CSS.
image
Итак, приступим. Прежде всего обратите внимание на структуру этого tooltips: это обыкновенная ссылка, которая будет выглядеть примерно так:

<a href ="#" title="Это обыкновенный Tooltips">Ссылка</a>

Позже мы будем использовать javascript, чтобы извлечь title и вставить его в контейнер:
<div class="tooltip">
<p>Это обыкновенный Tooltips</p>
</div>


CSS для нашего tooltips будет выглядеть примерно так:
.tooltip{
position:absolute;
z-index:999;
left:-9999px;
background-color:#dedede;
padding:5px;
border:1px solid #fff;
width:250px;
}
.tooltip p{
margin:0;
padding:0;
color:#fff;
background-color:#222;
padding:2px 7px;
}


* This source code was highlighted with Source Code Highlighter.


Position должен быть absolute, для того чтобы Javascript мог установить top и left свойство для div, который будет размещаться рядом с нашим курсором мыши. Пока мы устанавливаем свойство left = -9999px. Остальная часть CSS только для визуального оформления.

Создаем jQuery Tooltips: jQuery-код — краткий и простой:


Взгляните на весь скрипт, дальше я объясню по порядку что для чего.
function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);

$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
my_tooltip.fadeOut(400);
});
});
}
$(document).ready(function(){
simple_tooltip("a","tooltip");
});


* This source code was highlighted with Source Code Highlighter.

↑ Это может выглядеть сложным, особенно если Вы плохо знакомы с jQuery, но на самом деле все довольно просто. Прежде всего мы создаем функцию:

function simple_tooltip(target_items, name){
}


↑ target_items — переменная, которую мы определяем, вызывая скрипт. Например: чтобы добавить tooltips ко всем ссылкам в блоке #maincontent, необходимо ввести “#maincontent а”. Name определяет css класс, который мы применяем для нашего tooltip. Мы используем переменные здесь в целях придания гибкости скрипту, таким образом Вы можете добавить различные tooltips с различным стилями.

function simple_tooltip(target_items, name){
$(target_items).each(function(i){
// generates code for each tooltip
});
}


↑ Здесь мы генерируем код для каждого пункта, который будет найден нашим скриптом. Переменная i, которую мы передаем функции, будет автоматически увеличена jQuery после каждого повторения. Таким образом мы будем в состоянии дать каждому tooltips уникальный ID.

function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
});
}


↑ Этот фрагмент создает html-код для каждого tooltip. Они все получают один и тот же сlass, но различные ID. Title добавляется между тегами р.

function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");

var my_tooltip = $("#"+name+i);

});


↑ Эта строка выбирает tooltip и сохраняет его в переменной для дальнейшего использования.

function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);

$(this).removeAttr("title").mouseover(function(){
}).mousemove(function(kmouse){
}).mouseout(function(){
});

});
}


↑ Это — основная конструкция нашей функций. Прежде всего мы выбираем текущую ссылку $(this). Затем удаляем аттрибут title, так как мы не хотим что бы появлялся «нормальный» tooltip, который показывает каждый браузер, при наведении мыши на ссылку.

Затем мы вызываем 3 функции:
  • mouseover вызывается, когда мы впервые наводим на ссылку;
  • mousemove вызывается, когда мы перемещаем мышь над ссылкой;
  • mouseout вызывается, когда мышь «уходит» с сылки.

Как Вы можете видеть, мы передаем параметр в mousemove, этот параметр очень важен, так как он хранит положение курсора мыши.

$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
my_tooltip.fadeOut(400);
});


* This source code was highlighted with Source Code Highlighter.

Теперь мы определяем, что будет происходить, когда будут вызваны различные функции:
На mouseover мы устанавливаем некоторые значения css для tooltip: мы определяем прозрачность и устанавливаем display:none.
На mousemove мы устанавливаем значения для top и left чтобы помещать tooltip рядом с курсором. Координаты X и Y вызываются через .pageX и .pageY. Мы также добавляем небольшое смещение на 15 px, чтобы tooltip не находился непосредственно под курсором.
На mouseout мы просто вызываем функцию fadeOut(), чтобы скрыть tooltip.

$(document).ready(function(){
simple_tooltip("a","tooltip");
});


↑ Последнее что мы делаем — это вызываем скрипт, как только документ будет загружен. Как было упомянуто ранее, первый параметр — это селектор, а второй параметр — classname нашего tooltip. Таким образом Вы можете создать различные дизайны для разных tooltips.

А это результат нашей работы (См. внизу страницы и при наведении на картинку вверху страницы)
Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 40
  • +4
    Это простой способ создания тултипов?
    В чем преимущества вашего метода перед стандартным jQuery Tooltip Plugin?

    • НЛО прилетело и опубликовало эту надпись здесь
      • –1
        Идейно ничего сложного нет: все крутится вокруг mouseover/mouseout, эстеты еще события используют.
        + время на дебаг в разных браузерах
      • 0
        Наверное, у автора получилось менее объёмный код написать. Но jQuery Tooltip Plugin с другой стороны, более функционален. В большинстве случаев не нужна вся функциональность плагинов.
        • 0
          Как раз если сравнить тот код, который надо писать и дебагать самому, а не тот который уже написан и оттестирован :), то получится стандартный способ проще.
          • 0
            Наверное, всё-таки, это зависит от человека и от того, насколько у него много времени: мне кажется проще написать что-то своё, если требуются мелочи.
        • 0
          это вопрос не преимущества одного способа над другим, а краткий мануал по написанию своего tooltip-а, если вам нравится стандартный jQuery Tooltip Plugin, то, пожалуйста, используйте, но если хотите написать свой tooltip, то, надеюсь, эта статья вам поможет. Тут важно понимание того как все работает, + немного фантазии, и даже новичок может написать свой собственный tooltip добавив и расширив его возможности.
          Например, на странице автора статьи вы можете увидеть как он использовал tooltip в своем портфолио.
          • 0
            За код с подобными комментариями спасибо. Поставил +.
            Мне как раз актуальна эта тема — надо в одном проекте улучшить тултипу.
            Но лично мне было бы интереснее прочитать как создать плагин, чтобы использовать его совсем по-jquery-ному :) — с его стандартами вызовов и т. п.

        • 0
          размер этого тултипа — 1.2кб против 8кб для jQuery Tooltip Plugin.
          Вот вам самое главное отличие. Чем проще и менее наворочен компонент, тем лучше.
          Я считаю, что большего, чем этот тултип и не нужно, если не заниматься всякими извращениями.
          • 0
            Несколько килобайт для файла загружаемого 1 раз ничего не значат.
            Зато функционал гораздо больше.
            • 0
              а зачем нужно больше функционала чем здесь?
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            да уж… очень просто способ :-)
            в свое время делал нечто похожее, кода меньше
            (особенно если учесть что не пользовался никакими библиотеками)
            + учитывал что если экран на всплывающем блоке внезапно оборвется — то этот блок уйдет в другую сторону
            • –2
              Не понимаю, зачем это надо. Сейчас это действительно ширико используется, но вот цель и задачи непонятны. Ссылка «Главная» — тултип: «Перейти на главную». Это подсказка для дебилов что-ли? Для подсказки есть стандартная запись без всякого яваскрипта, которую выводят все браузеры. Зачем вывешивать дурацкие подсказки в отдельном окне — непонятно.
              • 0
                ну смысла в подсказке — «Главная» — тултип: «Перейти на главную» действительно нет, тут, как и в любом деле, нужно использовать tooltip c умом, там где он действительно нужен, к тому же tooltip можно применять не только к ссылкам, но и, например, к изображениям.
                • 0
                  Ну ваш пример это да, а вот если вам нужно при наведении выдать подсказку с графическим указанием и какой то разметкой? тогда уже стандартный не выводится… и на сколько я помню то ФФ не выводит стандартных тултипов…

                  А статья была бы более полезной если было бы еще описано как это оформить как плагин к JQ возможно далбы толчек созданию новых плагинов для JQ Tooltip
                  • –1
                    а в чем проблема? там на странице автора, да и у меня, есть пример tooltip-a с картинкой, в статье даются только основы, базовые понятия, а если немного пофантазировать, то можно можно написать совсем не плохой плагин, не хуже уже существующий, а может и лучше :)
                • +1
                  Ну и где вы были раньше? :)
                  • 0
                    В вашем примере, если быстро водить мышкой над ссылками, анимация проигрывается словно с запозданием (коряво изъяснился, но надеюсь поймете). Выглядит это не очень. Можно ли как то избавиться от случайных срабатываний? Спрашиваю, потому что столкнулся сам с подобным «эффектом» и как избавиться не придумал/нашел (пока только изучаю jquery).
                    • +1
                      можно сделать проверку: если курсор находится над ссылкой некоторое время (например 0.3 сек) то запускается анимация.
                      если вы быстро провели над ссылкой — никакой тултип не появляется.
                      setTimeout вам в помощь
                      • 0
                        спасибо, не попадалась эта функция на глаза раньше.
                      • 0
                        если я вас правильно понял, то это из-за fadeIn(400) — docs.jquery.com/Effects/fadeIn
                        • 0
                          Stalker_RED предложил похоже то что мне нужно.
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • 0
                          Booble — это скорее сиська,
                          Вы вероятно имели ввиду — Bubble :)
                          • НЛО прилетело и опубликовало эту надпись здесь
                            • 0
                              стесняюсь спросить (с), и что здесь общего? вы исходный код смотрели?
                          • 0
                            вы не поняли смысл статьи, тут не ставилась цель «открыть» миру такую замечательную фичу как tooltip, таких скриптов в сети десятки, скорее автор попытался пошагово описать процесс создания tooltip-а.
                            Другое дело если вы не хотите писать самостоятельно скрипты, тогда можете юзать ajaxrain.com.

                            P.S. При чем здесь Bubble Tooltip я не совсем понял, если это вы так решили из-за картинки в начале статьи, то я ее вставил просто для иллюстрации, выглядеть tooltip может как угодно.
                            • НЛО прилетело и опубликовало эту надпись здесь
                          • +1
                            Третья строка функции — $(«body»).append(""+$(this).attr('title')+""); — не вся у Вас пропечаталась.
                            • 0
                              ой, спасибо, исправил, это «нехороший» редактор html-теги спрятал
                            • –1
                              Ваш тултип, к сожалению, из т. н. «тупых», т. е. таких, которые не учитывают расположение элемента относительно края окна. Если, например, элемент окажется близко к правому краю, то тултип не «догадается» переметнуться влево. То же касается и вертикальных отношений.

                              А написать тултип именно что на jQuery — это просто развлечение, поскольку в этом фреймворке есть все необходимые кроссбраузерные данные и команды.
                              • +2
                                ну так вперед, основа уже есть, предложите свой «умный» tooltip. желательно с подробными комментариями, и я уверен куча народа будет вам благодарна
                              • 0
                                Я возможно получу кучку минусов за свое недопонимание, но вот у меня вопрос. (я тоже нуб и со многим еще разбираюсь в js)

                                разве приведенный код не есть пример злостного замыкания, которое отожрет пямять?
                                объясню что имею ввиду — внутри each(function(i){ создается переменная my_tooltip
                                к которой идеть обращение в функциях на события мыши. Насколько я понял из Рейсиговской книжки (Джон Рейсиг — автор jQuery) то после окончания работы функции которая вызывается в each(function(i){
                                реально переменная my_tooltip не умрет так как создалось «замыкание»

                                Поправьте меня если я не прав, может сам себя переумничал…

                                Второй вопрос: почему бы не использовать один и тот же tooltip получая его ну скажем через getElementById? и меня ему title?
                                • 0
                                  Если вызывать тултип у края экрана, появляется горизонтальный скрол.
                                  • 0
                                    лечится двумя ифами%)
                                  • 0
                                    Спасибо, пригодилось =)
                                    • –1
                                      есть же всеми любимый tooltip ;-)
                                      • 0
                                        Спасибо — воспользовались.

                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.