我有一个 CSS 工具提示,当悬停的元素太靠近内容区域的边缘时,它会被截断。请参阅本文底部的链接:http://blog.betbright.com/top-stories/manchester-united-v-club-brugge-betting-preview/
这是我用于工具提示的代码:
a.tooltip {
position: relative;
display: inline;
}
a.tooltip span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltip span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #00A1E0;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltip span {
visibility: visible;
opacity: 1;
bottom: 30px;
left: 100%;
margin-left: -76px;
z-index: 999;
}
如果您能推荐任何阻止工具提示被剪切的解决方案,我们将不胜感激。
谢谢, 保罗
最佳答案
您应该将 .entry-content
类的 overflow
属性设置为 visible
而不是 hidden
。您当前的设置隐藏了所有不适合该 div
的内容。由于您的工具提示将部分显示在您的 .entry-content div
之外,因此除非您更改 overflow
属性,否则会删除一部分。因此,您的错误不在工具提示中,而是在父元素中。
关于html - CSS 工具提示被截断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32052311/