Question

我有一堆不同的图像，当你悬停图像时，我会显示一个自定义工具提示，它自己设置在光标下。

现在，工具提示工作正常，但是如果我将窗口设置得很大，则将图像悬停在边缘上，然后再次使窗口变小，因此工具提示div位于体外，它会创建一个滚动条（水平）。 / p>

或者如果窗口足够小以便工具提示超出它，它还会创建一个滚动条（认为这可以通过一些javascript检查来修复）

基本上我问是否有办法制作div“不创建滚动条”或调用窗口大小调整功能？

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

您可以使用

overflow: hidden;

在CSS中

以防止滚动。在这种情况下，由于你没有任何东西包裹你的区域，你必须将它应用到身体。

body {
    overflow: hidden;
}

Answer 2

我通过修改hideTooltip函数解决了这个问题;

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

这将确保窗外没有工具提示。

Answer 3

overflow:hidden;

你自己应该做的事情。如果工具提示将移出视图

，您可以考虑在图像的另一侧显示工具提示

Div的“创建”滚动条

3 个答案: