Больше часа потратил, но зато вот что получилось:
http://learn.javascript.ru/play/iP4qO
<!DOCTYPE HTML>
<html>
<head>
<title>Tooltip by Ruslan_xDD aka Black Shadow</title>
<!---Skype: ruslan_xdd--->
<style type="text/css">
.help {
background: rgba(0,0,0,0.7);
border-radius: 10px;
color: #AAA;
margin-top: 8px;
opacity: 0;
padding: 3px 6px;
position: absolute;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
visibility: hidden;
z-index: 1;
}
.help::after {
border: 8px solid transparent;
border-bottom-color: rgba(0,0,0,0.7);
content: '';
left: 50%;
margin-left: -8px;
position: absolute;
top: -16px;
}
.help-show {
opacity: 1;
visibility: visible;
}
</style>
</head>
<body>
<a data-help="Текст 1" href="#">Ссылка с подсказкой №1</a>
<br>
<a data-help="Текст 2" href="#">Ссылка с подсказкой №2</a>
<br>
<input data-help="Текст 3" type="button" value="Кнопка с подсказкой">
<div data-help="Текст 4">Блок с подсказкой</div>
<script type="text/javascript">
(function(d) {
var createHelpBlock = function(text) {
var div = d.createElement('div');
div.appendChild(d.createTextNode(text));
div.className = 'help';
return div;
},
elems = d.querySelectorAll('[data-help]');
[].forEach.call(elems, function(self) {
self.addEventListener('mouseover', function() {
var helpBlock = this._helpBlock || createHelpBlock(this.dataset.help);
if(!this._helpBlock) {
this.parentNode.insertBefore(helpBlock, this.nextSibling);
this.clientHeight;
this._helpBlock = helpBlock;
}
else clearTimeout(this._helpTimeout);
helpBlock.classList.add('help-show');
}, true);
self.addEventListener('mouseout', function() {
var self = this;
this._helpBlock.classList.remove('help-show');
this._helpTimeout = setTimeout(function() {
self._helpBlock.remove();
self._helpBlock = null;
}, 3E3);
}, true);
});
})(document);
</script>
</body>
</html>