Вернуться к уроку

Поведение "подсказка"

важность: 5

При наведении мыши на элемент, на нём возникает событие mouseover, при удалении мыши с элемента – событие mouseout.

Зная это, напишите JS-код, который будет делать так, что при наведении на элемент, если у него есть атрибут data-tooltip – над ним будет показываться подсказка с содержимым этого атрибута.

Например, две кнопки:

<button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>

Результат в ифрейме с документом:

В этой задаче можно полагать, что в элементе с атрибутом data-tooltip – только текст, то есть нет подэлементов.

Детали оформления:

  • Подсказка должна появляться при наведении на элемент, по центру и на небольшом расстоянии сверху. При уходе курсора с элемента – исчезать.
  • Текст подсказки брать из значения атрибута data-tooltip. Это может быть произвольный HTML.
  • Оформление подсказки должно задаваться CSS.
  • Подсказка не должна вылезать за границы экрана, в том числе если страница частично прокручена. Если нельзя показать сверху – показывать снизу элемента.

Важно: нужно использовать приём разработки «поведение», то есть поставить обработчик (точнее два) на document, а не на каждый элемент.

Плюс этого подхода – динамически добавленные в DOM позже элементы автоматически получат этот функционал.

Открыть песочницу для задачи.