<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px;
/* подсказка должна работать независимо от прокрутки */
}
.button {
position: relative;
}
.button:hover .tooltip {
display: block;
}
.tooltip {
display: none;
position: absolute;
padding: 10px 20px;
top: 130%;
left: 0;
/* красивости... */
white-space: nowrap;
border: 1px solid #b3c9ce;
border-radius: 4px;
text-align: center;
font: italic 14px/1.3 arial, sans-serif;
color: #333;
background: #fff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<button class="button" data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
<button class="button" data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
<p>Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.</p>
<p style="margin-top: 1200px">Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.</p>
<button class="button" data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
<button class="button" data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
<script>
document.onmouseover = function(e) {
var target = e.target;
var tooltip = target.getAttribute('data-tooltip');
if (!tooltip) return;
var tooltipElem = document.createElement('span');
tooltipElem.className = 'tooltip';
tooltipElem.innerHTML = tooltip;
target.appendChild(tooltipElem);
};
</script>
</body>
</html>
