我有一个div设置为溢出滚动,并且我想显示它们中的工具提示,工具提示“泄漏”出容器,因此它被隐藏起来。我在StackOverflow上看到了关于这个问题的其他问题,基本上他们都删除了包含元素的position: relative;
,但我需要position: relative;
以便工具提示应该在正确的位置呈现。
有一段时间有这个问题,非常感谢帮助!
JSFiddle这里工具提示溢出:滚动;元素
回答
奥凯感谢你的问题的更新,看看下面的剪断,
.container {
background: #ddd;
margin: 20px;
width: 150px;
height: 100px;
overflow: auto;
position: relative;
}
span.tip {
display: none;
}
.child:hover > span.tip {
display: block;
}
.tip {
position: absolute;
left: 10px;
content: attr(data-tipsy);
background-color: #34495e;
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
padding: 5px 10px;
white-space: nowrap;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
<div class="container">
<div class="child">
test tooltip
<span class="tip" data-tipsy="Simple Tipsy">Test Tipsy</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, maecenas.
</div>
<div class="child">
test tooltip
<span class="tip" data-tipsy="Simple Tipsy">Test Tipsy</span>
</div>
</div>
Ofcourse你有一个像你想样式。
这个问题是,这个工具提示是相对定位,因此将占据页面的流程中,我需要一个位置的绝对解决方案 –
看看这个更新的JS小提琴https://jsfiddle.net/t1hvbbj9/ –
再次检查片段,这是你需要什么? – dutchsociety
您是否确实需要overflow:scroll
标签以便您没有滚动条?
如果是这样,我完全删除了overflow
- 但不知道这是否是您需要的。它的唯一途径,我可以通过保持做到这一点position:relative
见修订小提琴 - https://jsfiddle.net/eyfoa90L/3/
我确实需要溢出属性我需要一个解决方案,父母有一个溢出滚动和工具提示有绝对位置https://jsfiddle.net/0qfzxbvk/ –
我想你能不能解决CSS这个问题,这是因为:悬停的CSS属性总是需要的子元素“悬停“元素来使用它的属性。 如果您想要解决此问题,您需要将工具提示放在任何获取的父元素之外。
我觉得Javascript和addEventListener('onmouseover',函数)是你最好的选择。
- 1. Bootstrap工具提示:溢出?
- 2. 在div元素溢出自动滚动
- 3. 溢出:android和原生滚动的滚动元素,-webkit溢出滚动:touch
- 4. 调整具有溢出的元素:自动考虑滚动条
- 5. IE - 溢出元素滚动到底
- 6. Flexbox元素不滚动溢出
- 7. 固定定位元素溢出:滚动
- 8. webkit溢出滚动使元素消失
- 9. 领带DIV元素溢出滚动条
- 10. Webkit溢出滚动对齐元素
- 11. 与溢出元素skrollr问题:滚动
- 12. 工具提示表溢出隐藏
- 13. Highcharts工具提示溢出隐藏
- 14. KendoUI工具提示溢出窗口
- 15. Extjs溢出按钮工具提示
- 16. 如何禁用鼠标拖动滚动元素溢出:滚动
- 17. 溢出滚动不工作位置固定元素iOS
- 18. 在溢出时显示jscrollpanes:滚动元素
- 19. 滚动溢出元素时禁用窗口滚动
- 20. 固定位置:溢出时的绝对元素:滚动时的滚动元素
- 21. 锤上元素防止-webkit溢出滚动:触摸子元素
- 22. highcharts工具提示显示滚动条
- 23. 是否可以显示位于溢出元素之外的元素:滚动?
- 24. 绝对元素具有溢出自动元素
- 25. 引导工具提示自动放置div与溢出-y
- 26. 防止页面滚动,但允许元素与溢出滚动滚动JQM
- 27. 滚动div内的CSS工具提示
- 28. 滚动到jquery工具提示
- 29. 无限滚动+工具提示
- 30. 工具提示在画布元素
请添加您的代码。 – frnt
任何链接或代码请 – dutchsociety
这里是一个JS小提琴https://jsfiddle.net/eyfoa90L/ –