назад до уроку

Поведінка підказки

важливість: 5

Створіть JS-код для поведінки спливаючої підказки.

При наведенні миші на елемент з data-tooltip, підказка має з’явитися над ним і ховатися при переході на інший елемент.

Приклад HTML з підказками:

<button data-tooltip="підказка довша за елемент">Мала кнопка</button>
<button data-tooltip="HTML<br>підказка">Ще одна кнопка</button>

Повинно працювати так:

У цьому завданні ми припускаємо, що всі елементи з data-tooltip містять лише текст всередині. Немає вкладених тегів (поки що).

Деталі:

  • Відстань між елементом і підказкою має бути 5px.
  • Підказка повинна бути відцентрована відносно елемента, якщо це можливо.
  • Підказка не повинна перетинати краї вікна. Зазвичай вона має бути над елементом, але якщо елемент знаходиться у верхній частині сторінки і немає місця для підказки, то під ним.
  • Вміст підказки вказується в атрибуті data-tooltip. Це може бути довільний HTML.

Тут вам знадобляться дві події:

  • mouseover спрацьовує, коли курсор переходить на елемент.
  • mouseout спрацьовує, коли курсор покидає елемент.

Будь ласка, використовуйте делегування подій: налаштуйте два обробники на document, щоб відстежувати всі “заходи” і “виходи” курсору на елементи з атрибутом data-tooltip і керувати підказками звідти.

Після реалізації поведінки люди, навіть не знайомі з JavaScript, зможуть додавати підказки до елементів.

P.S. Одночасно може відображатися лише одна підказка.

Відкрити пісочницю для завдання.