html - 隐藏的 CSS 工具提示框

Question

我有一个 CSS 工具提示框，它部分隐藏在我的内容中。 我希望它可以延伸到内容框之外，或者移动以使其留在内容框内。

您可以在此处查看工具提示 http://aorasieconsultant.com/site.html当您将鼠标悬停在图像上时，在第二页上。

链接到页面 css 文件 http://aorasieconsultant.com/styles.css

这是工具提示 css:

    a.tooltip{
    outline: none;
    text-decoration:none;
    color: inherit;
    position:relative;
}
a.tooltip span{
    height: auto;
    pointer-events: none;
    position: absolute;
    left:0;
    bottom:10px;
    z-index:1;
    opacity: 0;
    padding: 0px;
    background:#B40406;  
    text-align: left;
    font-weight: normal;
    font-size:0.8em;
    display:inline-block;
    white-space:nowrap;
    border: 6px solid #fff;
    border-radius: 5px;
    box-shadow: 2px 10px 10px rgba(0,0,0,0.2);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
a.tooltip span:before,
a.tooltip span:after{
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    margin-left:-11px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.1);
}
a.tooltip span:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}
a.tooltip:hover span{
    opacity: 0.95;
    bottom:50px;
}

Answer 1

看起来 customScrollBox 是覆盖 tooltip 的元素。将 overflow:visible 添加到 customScrollBox 并且 tooltip 超出了 customScrollBox 的边界。