隐藏CSS工具提示框

我有一个CSS工具提示框，它隐藏在我的内容中部分隐藏。我希望它能延伸过去的内容框，或者移动它以保留在内容框中。隐藏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; 
}

来源

2014-01-09 oturpin

你可以在这里发布相关标记而不是外部链接吗？或者可能创建一个我们可以看到的jsfiddle？ – Goose

jsfiddle的+1。你有没有试过在'a.tooltip span'块中指定'clip：auto'？ –

我只是想说：不错的网站 –

它看起来像customScrollBox是覆盖tooltip的元素。将overflow:visible添加到customScrollBox并将tooltip扩展到customScrollBox的范围之外。

来源

2014-01-09 22:12:22 Nathan

这工作，工具提示现在可以离开div，但现在我的滚动文本不起作用。（垂直滚动文本应保留在div）我试着使用'overflow-x：visible'和'overflow-y：hidden'，但它给了我一个水平滚动条...... – oturpin

隐藏CSS工具提示框

回答

相关问题