<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="insert.js" ></script>
<style>
body {
height: 2000px; /* подсказка должна работать независимо от прокрутки */
}
a {
position: relative;
z-index: 1;
}
.css {
position: absolute;
z-index: 2;
padding: 1em;
border-radius: 3px;
border:1px solid black;
opacity: 1.0;
background-color: white;
font-style:italic;
}
</style>
</head>
<body>
<a href="#" id="link" data-tooltip="подсказка длиннее, чем элемент">Короткая ссылка</a>
<a href="#" id="link2" data-tooltip="HTML<br>подсказка">Еще ссылка</a>
<script>
var id='';
document.body.onmouseout = function(e) {
var event = e || window.event;
var target = event.target || event.srcElement;
var relTarget = event.relatedTarget || event.toElement;
if (target.tagName=='A' && (relTarget.tagName!='A' || id!=target.id)){
var elem = target.getElementsByTagName('div')[0];
//target.style.visibility.hidden;
//alert(elem.id);
id=target.id;
target.removeChild(elem);
}
if (relTarget.tagName=='A'){
var newDiv = document.createElement('div');
newDiv.setAttribute('class', 'css');
newDiv.innerHTML = relTarget.getAttribute('data-tooltip');
//alert(newDiv);
relTarget.insertAdjacentElement('afterBegin', newDiv);
}
};
</script>
</body>
</html>
Первая ссылка не работает и при уведении с неё мыши генерирует ошибку, а вторая работает нормально. 2 часа думал в чём дело, так и не понял. Может, кто подскажет?