Підказки на jQuery
У цьому уроці ми розглянемо спосіб створення спливаючої підказки на jQuery. Все це можна зробити, помістивши опис поряд з об'єктом, але для цього не завжди вистачає вільного місця та й структура сайту може ускладнити подібну реалізацію. Тут нам чудово допоможуть спливаючі підказки. Їх можна реалізувати стандартним атрибутом title. Але можна спробувати створити і власні підказки на jQuery , які не будуть обмежені стандартним стильовим оформленням атрибуту title, запропонованим тим чи іншим браузером.
Перш, ніж ми розпочнемо реалізацію задуманого, необхідно описати завдання і накидати алгоритм її реалізації. Для розуміння того, що ми хочемо отримати, просто розглянемо мінуси стандартної підказки, що отримується атрибутом title. Отже, такими є:
поява підказки із затримкою;
зникнення підказки після руху покажчиком миші об'єктом;
Таким чином, підказка користувача повинна бути позбавлена зазначених мінусів. Тепер про реалізацію. Очевидно, що підказка повинна бути поміщена в атрибут об'єкта і при русі мишею по області об'єкта необхідно отримати значення атрибута з підказкою і показати його.
Показувати підказку ми будемо у спеціально створеному блоці. Але, якщо ми просто розмістимо блок у потоці елементів, його становище завжди буде фіксованим, тобто. він завжди буде на одному місці. Нам необхідно, щоб блок з підказкою завжди «слідував» за вказівником миші весь час, коли вказівник знаходиться на об'єкті. Домогтися цього можна, поставивши блоку абсолютне позиціонування. Ну а координати блоку будуть задавати динамічно, на основі координат поточногостановища миші.
Також необхідно врахувати, що спочатку блок для підказки має бути прихований. При наведенні на об'єкт - його потрібно показати, а при виході з області об'єкта - знову приховати. Отже, ми окреслили наш алгоритм. Тепер давайте систематизуємо це:
Блок для підказки спочатку прихований.
При русі курсора миші по об'єкту зчитуємо атрибут з підказкою.
Отримуємо координати вказівника миші.
Привласнюємо отримані координати абсолютно позиціонованого блоку з підказкою.
Виводимо підказку з пункту 2 блок.
Показуємо блок із підказкою.
Коли миша йде з об'єкта — приховуємо блок.
Алгоритм готовий, приступимо до реалізації.
Для початку створимо 2 об'єкти, з якими працюватимемо - посилання та картинку. Також у будь-якому місці коду додамо блок для підказки: