2.4 KiB
Поведение "подсказка"
[importance 5]
При наведении мыши на элемент, на нём возникает событие mouseover, при удалении мыши с элемента -- событие mouseout.
Зная это, напишите JS-код, который будет делать так, что при наведении на элемент, если у него есть атрибут data-tooltip -- над ним будет показываться подсказка с содержимым этого атрибута.
Например, две кнопки:
<button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
Результат в ифрейме с документом:
[iframe src="solution" height=200 border=1]
В этой задаче можно полагать, что в элементе с атрибутом data-tooltip -- только текст, то есть нет подэлементов.
Детали оформления:
- Подсказка должна появляться при наведении на элемент, по центру и на небольшом расстоянии сверху. При уходе курсора с элемента -- исчезать.
- Текст подсказки брать из значения атрибута `data-tooltip`. Это может быть произвольный HTML.
- Оформление подсказки должно задаваться CSS.
- Подсказка не должна вылезать за границы экрана, в том числе если страница частично прокручена. Если нельзя показать сверху -- показывать снизу элемента.
Важно: нужно использовать приём разработки "поведение", то есть поставить обработчик (точнее два) на document, а не на каждый элемент.
Плюс этого подхода -- динамически добавленные в DOM позже элементы автоматически получат этот функционал.