«Создание» полос прокрутки Diva

Question

У меня есть куча разных изображений, и когда вы наводите изображения, я показываю пользовательскую подсказку, которая устанавливается непосредственно под курсором.

Теперь всплывающие подсказки отлично работают, но если я сделаю окно большим, наведите изображение на край, а затем снова сделайте окно маленьким, поэтому всплывающая подсказка div вне тела, он создает полосу прокрутки (по горизонтали).

Или, если окно достаточно мал, поэтому подсказке получает за его пределами, он также создает скроллбар (думал, что это поправимо некоторыми яваскрипта чеками)

Основном Я спрашиваю, есть ли способ сделать div «не создавать полосу прокрутки» или вызвать функцию при изменении размера окна?

JSFiddle showing what's happening

HTML

<div style='position:relative;'> 
    <div class='img' onmousemove="showTooltip('tip', event);" onmouseout="hideTooltip('tip');"></div> 
    <div id='tip' class='tooltip'></div> 
</div> 

CSS

.img { 
    width:500px; 
    height:500px; 
    background-color:#F00; 
} 
.tooltip { 
    width:200px; 
    height:200px; 
    background-color:#888; 
    position:absolute; 
} 

JS

function showTooltip(name, event) { 
    var div = document.getElementById(name); 
    div.style.visibility = "visible"; 
    div.style.top = (event.clientY + 20 + document.body.scrollTop) + "px"; 
    div.style.left = (event.clientX + 20 + document.body.scrollLeft) + "px"; 
} 

function hideTooltip(name) { 
    document.getElementById(name).style.visibility = "hidden"; 
} 

Answer 1

Я решил это, изменив функцию hideTooltip;

function hideTooltip(name) { 
    var div = document.getElementById(name); 
    div.style.visibility = "hidden"; 
    div.style.top = "0px"; 
    div.style.left = "0px"; 
} 

Это гарантирует, что всплывающая подсказка не будет находиться за окном.

Answer 2

overflow:hidden; 

в yous css должен делать только то, что нужно. Вы могли бы рассмотреть показ всплывающей подсказки на другой стороне изображения, если ваша подсказка будет двигаться вне поля зрения

Answer 3

Вы можете использовать

overflow: hidden; 

в вашем CSS, чтобы предотвратить прокрутку. В этом случае, поскольку у вас нет какой-либо упаковки вашей области, вам придется применить ее к телу.

body { 
    overflow: hidden; 
}