GeezerVison

"Розумна" підказка

Напишіть функцію, яка показуватиме спливаючу підказку над елементом лише тоді, коли користувач веде вказівник миші безпосередньо до нього, але не крізь нього.

Іншими словами, якщо користувач наводить вказівник миші на елемент і зупиняється на ньому, показується підказка. І якщо просто провели мишею, то показувати підказку взагалі не потрібно, кому може сподобатись додаткове миготіння?

Технічно ми можемо виміряти швидкість з якою рухається вказівник над елементом, і якщо вона (швидкість) повільна, ми припускаємо, що вказівник проходить “над елементом” і показуємо спливаючу підказку, якщо вона швидка, ми ігноруємо цей прохід вказівника.

У цьому завданні ви маєте описати клас і створити універсальний об’єкт new HoverIntent(options)

Його options:

• elem – елемент для відстеження.
• over – функція, яка викликається, якщо миша підійшла до елемента: тобто вона повільно рухається або зупиняється над ним.
• out – функція для виклику, коли вказівник залишає елемент (якщо було викликано over).

Приклад використання такого об’єкта для підказки:

// зразок підказки
let tooltip = document.createElement('div');
tooltip.className = "tooltip";
tooltip.innerHTML = "Tooltip";

// об'єкт буде стежити за мишею та викликатиме over/out
new HoverIntent({
  elem,
  over() {
    tooltip.style.left = elem.getBoundingClientRect().left + 'px';
    tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
    document.body.append(tooltip);
  },
  out() {
    tooltip.remove();
  }
});

Як це має працювати:

Якщо наводити мишу на елемент “clock” швидко, то нічого не відбувається, а якщо ви робите це повільно або зупиняєтеся на ньому, то з’явиться спливаюча підказка.

Зверніть увагу: спливаюча підказка не “блимає”, коли вказівник переміщується між вкладенними елементами всередині “clock”.

Відкрити пісочницю з тестами.