Спливаючі підказки на jQuery. Створюємо спливаючі підказки при наведенні на jQuery

25

Від автора: досить часто виникає потреба «повісити» на якийсь елемент сайту опис, своєрідну підказку. Така необхідність може бути викликана тим, що необхідно пояснити користувачу які функції виконує той чи інший елемент сайту. Або Ви просто хочете додати якесь опис до фото або картинки.

У цьому уроці ми розглянемо спосіб створення підказки на jQuery. Все це можна зробити, помістивши опис поруч з об’єктом, але для цього не завжди вистачає вільного місця, та й структура сайту може ускладнити таку реалізацію. Тут нам допоможуть здорово спливаючі підказки. Їх можна реалізувати стандартним атрибутом title. Але можна спробувати створити і власні спливаючі підказки на jQuery, які не будуть обмежені стандартним стильовим оформленням атрибута title, запропонованим тим чи іншим браузером.

Спливаючі підказки на jQuery. Створюємо спливаючі підказки при наведенні на jQueryСпливаючі підказки на jQuery. Створюємо спливаючі підказки при наведенні на jQuery

Перш, ніж ми приступимо до реалізації задуманого, необхідно окреслити завдання і накидати алгоритм її реалізації. Для розуміння того, що ми хочемо отримати, просто розглянемо мінуси стандартної підказки, одержуваної атрибут title. Отже, такими є:

поява підказки з затримкою;

зникнення підказки після руху покажчиком миші по об’єкту;

стандартна стилізація.

Таким чином, користувацька підказка повинна бути позбавлена зазначених недоліків. Тепер про реалізації. Очевидно, що підказка повинна бути поміщена в якийсь атрибут об’єкта і при русі мишею по області об’єкта необхідно отримати значення атрибута з підказкою та показати його.

Показувати підказку ми будемо в спеціально створеному блоці. Але, якщо ми просто розмістимо блок в потоці елементів, то його положення завжди буде фіксованим, тобто він завжди буде знаходитися на одному місці. Нам же необхідно, щоб блок з підказкою завжди «йшов» за покажчиком миші весь час, коли вказівник знаходиться на об’єкті. Домогтися цього можна, задавши блоку абсолютне позиціонування. Ну а координати блоку будуть задавати динамічно, на основі координат положення миші.

Також необхідно врахувати, що спочатку блок для підказки повинен бути прихований. При наведенні на об’єкт — його потрібно показати, а при виході з області об’єкта — знову приховати. Отже, ми окреслили докладно наш алгоритм. Тепер давайте систематизуємо це:

Блок для підказки спочатку приховано.

При русі курсору миші по об’єкту зчитуємо атрибут з підказкою.

Отримуємо координати покажчика миші.

Присвоюємо отримані координати абсолютно позиционированному блоку з підказкою.

Виводимо підказку з пункту 2 в блок.

Показуємо блок з підказкою.

Коли миша «йде» з об’єкта — приховуємо блок.

Алгоритм готовий, приступимо до реалізації.

Для початку створимо 2 об’єкти, з якими будемо працювати — посилання і картинку. Також в будь-якому місці коду додамо блок для підказки:

111

Link

Спливаючі підказки на jQuery. Створюємо спливаючі підказки при наведенні на jQuery

В блок для підказки з ідентифікатором hint ми помістили набір символів, щоб блок був видний:

Спливаючі підказки на jQuery. Створюємо спливаючі підказки при наведенні на jQuery

Посиланнях ми додали атрибут rel, в який поміщені підказки. Також кожному посиланні ми дали клас hover, щоб можна було працювати з об’єктами за допомогою jQuery. Зараз блок підказки видно і знаходиться в загальному потоці елементів. Давайте для початку спозиционируем його абсолютно і поки що вручну задамо йому координати. Для цього додамо стильове правило для ідентифікатора hint:

#hint{
position:absolute;
border:1px solid #ccc;
top:20px;
left:100px;
}

Після цього ми отримаємо наступну картину:

Спливаючі підказки на jQuery. Створюємо спливаючі підказки при наведенні на jQuery

Тепер, згідно з алгоритмом, вважаємо підказку об’єкта, по якому рухається миша. Але перш — отримаємо координати покажчика миші. В цьому нам допоможе подія mousemove(). Дана подія відбувається тоді, коли вказівник рухається над областю елемента. Обробника події передається одна змінна — об’єкт події. У властивостях цього об’єкта — clientX, clientY — і знаходяться координати покажчика.

Отримаємо координати і виведемо їх в блок підказки (не забудьте прибрати текст, який в блоці ми писали спочатку):

$(document).ready(function(){
$(‘.hover’).mousemove(function(e){
$(‘#hint’).text(e.clientX + » + e.clientY);
});
});

Тепер при русі по елементу відбувається зчитування координат покажчика миші у вікні браузера і ці координати (X і Y) змінюються в блоці hint.

Спливаючі підказки на jQuery. Створюємо спливаючі підказки при наведенні на jQuery

Відмінно! Координати у нас є, отже — можна позиціонувати блок hint. Додамо трохи стилів блоку (також заберемо атрибути top і left із стилів):

#hint{
display:none;
position:absolute;
border:1px solid #ccc;
padding:5px;
background:yellow;
border-radius:5px;
}

Тепер блок прихований. Його ми будемо відкривати події mousemove(). У функції події mousemove() отримаємо значення атрибуту rel елемента, на якому відбулося сама подія:

$(document).ready(function(){
$(‘.hover’).mousemove(function(e){
var hint = $(this).attr(‘rel’);
});
});

Зазначимо координати блоку hint, скориставшись методом css():

$(document).ready(function(){
$(‘.hover’).mousemove(function(e){
var hint = $(this).attr(‘rel’);
$(‘#hint’).css({‘left’: e.clientX + 10, ‘top’: e.clientY + 10});
});
});

Тут ми також до наявних координатами додали по 10 пікселів. Зроблено це для того, щоб блок hint мав невеликий відступ від курсору миші.

Ну і, нарешті, додамо текст підказки в блок і покажемо сам блок:

$(document).ready(function(){
$(‘.hover’).mousemove(function(e){
var hint = $(this).attr(‘rel’);
$(‘#hint’).css({‘left’: e.clientX + 10, ‘top’: e.clientY + 10});
$(‘#hint’).show().text(hint);
});
});

В результаті ми отримали користувача спливаючу підказку:

Спливаючі підказки на jQuery. Створюємо спливаючі підказки при наведенні на jQuery

Залишилося приховати блок hint після того, як вказівник йде з объкта. Тут скористаємося подією mouseout() і методом hide():

$(document).ready(function(){
$(‘.hover’).mousemove(function(e){
var hint = $(this).attr(‘rel’);
$(‘#hint’).css({‘left’: e.clientX + 10, ‘top’: e.clientY + 10});
$(‘#hint’).show().text(hint);
}).mouseout(function(){
$(‘#hint’).hide();
});
});

Ось, власне, і все. Тепер блок з підказкою показується при русі курсору миші по об’єкту і ховається, коли вказівник покидає область об’єкта.

Також можна спробувати задати атрибут користувача елементів і працювати з ним. Наприклад, дамо елементів атрибут ht:

Link

Спливаючі підказки на jQuery. Створюємо спливаючі підказки при наведенні на jQuery

Якийсь текст

Відповідно, в коді jQuery будемо працювати вже з даними атрибутом:

$(document).ready(function(){
$(‘.hover’).mousemove(function(e){
var hint = $(this).attr(‘ht’);
$(‘#hint’).css({‘left’: e.clientX + 10, ‘top’: e.clientY + 10});
$(‘#hint’).show().text(hint);
}).mouseout(function(){
$(‘#hint’).hide();
});
});

Ми реалізували поставлене завдання, створили спливаючу підказку на jQuery, на цьому урок можна закінчувати. Далі все залежить лише від Вас і обмежена лише Вашою фантазією. Можна стилізувати блок підказки як завгодно — додати фонове зображення, тінь, змінити шрифт і т. д. В результаті можна отримати симпатичну підказку, яку можна застосувати до будь-якого елементу сайту, додавши таким чином своєрідну родзинку.

Удачі Вам і до нових зустрічей!