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的范围。

隐藏CSS工具提示框

1 个答案: