Показать сообщение отдельно
  #4 (permalink)  
Старый 30.05.2014, 14:51
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Разбираться в коде не хочется. По этому привожу общий принцип.

<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>
Ответить с цитированием