132 lines
No EOL
4 KiB
HTML
132 lines
No EOL
4 KiB
HTML
<!DOCTYPE HTML>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<style>
|
||
body {
|
||
height: 2000px;
|
||
/* подсказка должна работать независимо от прокрутки */
|
||
}
|
||
|
||
.tooltip {
|
||
position: fixed;
|
||
z-index: 100;
|
||
/* подсказка должна перекрывать другие элементы */
|
||
|
||
padding: 10px 20px;
|
||
/* красивости... */
|
||
|
||
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);
|
||
}
|
||
|
||
#house {
|
||
margin-top: 50px;
|
||
width: 400px;
|
||
border: 1px solid brown;
|
||
}
|
||
|
||
#roof {
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 200px solid transparent;
|
||
border-right: 200px solid transparent;
|
||
border-bottom: 20px solid brown;
|
||
margin-top: -20px;
|
||
}
|
||
|
||
p {
|
||
text-align: justify;
|
||
margin: 10px 3px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
|
||
<div data-tooltip="Это – внутренность дома" id="house">
|
||
<div data-tooltip="Это – крыша" id="roof"></div>
|
||
|
||
<p>Жили-были на свете три поросёнка. Три брата.</p>
|
||
|
||
<p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
|
||
|
||
<p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
|
||
|
||
<p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше…">Наведи на меня</a></p>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
var showingTooltip;
|
||
|
||
document.onmouseover = function(e) {
|
||
var target = e.target;
|
||
|
||
// ВАЖНО: mouseover может сработать сразу на потомке
|
||
// минуя родителя (при быстром движении мышью)
|
||
|
||
// пройти вверх до первого элемента с data-tooltip
|
||
while (target !== this) {
|
||
var tooltip = target.getAttribute('data-tooltip');
|
||
if (tooltip) break;
|
||
target = target.parentNode;
|
||
}
|
||
|
||
if (!tooltip) return;
|
||
|
||
// показать и запомнить подсказку
|
||
showingTooltip = showTooltip(tooltip, target);
|
||
}
|
||
|
||
document.onmouseout = function() {
|
||
// возможно такое, что mouseout сработал, а мы все еще внутри элемента (всплытие)
|
||
// но в этом случае сразу же будет и mouseover,
|
||
// то есть подсказка будет уничтожена и тут же показана заново
|
||
//
|
||
// это лишние расходы, их можно избежать дополнительными проверками
|
||
if (showingTooltip) {
|
||
document.body.removeChild(showingTooltip);
|
||
showingTooltip = false;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
function showTooltip(text, elem) {
|
||
var tooltipElem = document.createElement('div');
|
||
tooltipElem.className = 'tooltip';
|
||
tooltipElem.innerHTML = text;
|
||
document.body.appendChild(tooltipElem);
|
||
|
||
var coords = elem.getBoundingClientRect();
|
||
|
||
var left = coords.left + (elem.offsetWidth - tooltipElem.offsetWidth) / 2;
|
||
if (left < 0) left = 0; // не вылезать за левую границу экрана
|
||
|
||
// не вылезать за верхнюю границу окна
|
||
var top = coords.top - tooltipElem.offsetHeight - 5;
|
||
if (top < 0) {
|
||
top = coords.top + elem.offsetHeight + 5;
|
||
}
|
||
|
||
tooltipElem.style.left = left + 'px';
|
||
tooltipElem.style.top = top + 'px';
|
||
|
||
return tooltipElem;
|
||
}
|
||
|
||
|
||
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |