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

[importance 5]

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

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

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

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

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

[iframe src="solution" height=200 border=1]

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

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

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

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

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