именно строки 1,2,3 в комментариях не ясны.Так же не ясен кусок с tooltipElem строка 4 и следующие несколько строк
По заданию: При наведении мыши на элемент, на нём возникает событие mouseover, при удалении мыши с элемента – событие mouseout.
Зная это, напишите JS-код, который будет делать так, что при наведении на элемент, если у него есть атрибут data-tooltip – над ним будет показываться подсказка с содержимым этого атрибута.
В этой задаче можно полагать, что в элементе с атрибутом data-tooltip – только текст, то есть нет подэлементов.
Детали оформления:
Подсказка должна появляться при наведении на элемент, по центру и на небольшом расстоянии сверху. При уходе курсора с элемента – исчезать. Текст подсказки брать из значения атрибута data-tooltip. Это может быть произвольный HTML. Оформление подсказки должно задаваться CSS. Подсказка не должна вылезать за границы экрана, в том числе если страница частично прокручена. Если нельзя показать сверху – показывать снизу элемента. Важно: нужно использовать приём разработки «поведение», то есть поставить обработчик (точнее два) на document, а не на каждый элемент.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px;
/* подсказка должна работать независимо от прокрутки */
}
.tooltip {
position: fixed;
padding: 10px 20px;
/* красивости... */
border: 1px solid #b3c9ce;
border-radius: 4px;
text-align: center;
font: italic 14px/1.3 sans-serif;
color: #333;
background: #fff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
<p>Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.</p>
<script>
var showingTooltip;
document.onmouseover = function(e) {
var target = e.target;
var tooltip = target.getAttribute('data-tooltip');
if (!tooltip) return;
var tooltipElem = document.createElement('div'); // 4
tooltipElem.className = 'tooltip';
tooltipElem.innerHTML = tooltip;
document.body.appendChild(tooltipElem);
var coords = target.getBoundingClientRect();
var left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2; // (1)
if (left < 0) left = 0; // не вылезать за левую границу окна
var top = coords.top - tooltipElem.offsetHeight - 5; // (2)
if (top < 0) { // не вылезать за верхнюю границу окна
top = coords.top + target.offsetHeight + 5; // (3)
}
tooltipElem.style.left = left + 'px';
tooltipElem.style.top = top + 'px';
showingTooltip = tooltipElem;
};
document.onmouseout = function(e) {
if (showingTooltip) {
document.body.removeChild(showingTooltip);
showingTooltip = null;
}
};
</script>
</body>
</html>
