Разбираться в коде не хочется. По этому привожу общий принцип.
<style>
#tooltip {
display: none;
position: absolute;
border: 1px solid #666;
background-color: #AAA;
}
</style>
<div style="height: 100px"></div>
<button type="button" value="">Показать тултип</button>
<div style="height: 500px"></div>
<button type="button" value="">Показать тултип</button>
<div id="tooltip">Текст текст текст</div>
<script>
var buttons = Array.prototype.slice.call(document.getElementsByTagName('button'));
buttons.forEach(function (button) {
button.addEventListener('click', onClick, false);
});
var tooltip = document.getElementById('tooltip');
diffTop = -20, // смещение по y
diffLeft = 20; // смещение по х
function onClick(e) {
var el = e.target,
top = el.offsetTop,
left = el.offsetLeft,
width = el.offsetWidth;
tooltip.style.left = left + width + diffLeft + 'px';
tooltip.style.top = top + diffTop + 'px';
tooltip.style.display = 'block';
}
</script>