Як зробити напис або підказку під курсором миші на jquery

Хочу розповісти ще про одну задачу, яку мені доводилося вирішувати на Jquery.

Був певний блок на сторінці (елемент div). Замовнику потрібно було, щоб при наведенні курсору миші на цей блок, поруч з курсором миші з'являлася підказка. Ця підказка була текст на білому тлі. Було важливо, щоб, коли курсор миші залишав обраний блок, підказка зникала.

В кінцевому підсумку, це повинно було виглядати приблизно ось так:

Почнемо з HTML вмісту:

Floatingmes - блок з підказкою, яка буде виникати

Block - Основний блок, при наведенні курсору миші на який, буде виникати підказка.

Стилі CSS для цих блоків наступні:

І, нарешті, скрипти, які змушують підказку рухатися:

Для елемента block створюється подія mousemove і mouseleave, які будуть виконуватися при пересуванні курсора по блоку і при догляді мишки з нього.

Коли мишка «залишає» блок, підказка просто зникає.

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

І змінюємо її позицію, в залежності від того місця, де знаходиться курсор зі зміщенням, 10 Пікслей.

Алгоритм приблизно такий. Сподіваюся приклад виявився корисним і ви візьмете собі його на озброєння.

До речі, якщо вам буде цікаво, я займаюся налаштуванням систем веб-аналітики для сайтів (Яндекс Метрика і Google Analytics).

Як зробити напис або підказку під курсором миші на jquery

Якщо ви хотіли б зробити ваш сайт більш ефективним і, щоб він приносив більше грошей, веб-аналітика може в цьому допомогти.

За допомогою інструменту «Цілі» ви можете добитися добрих результатів в цій справі. Детальніше тут.