工具提示溢出：滚动;元素

-1

我有一个div设置为溢出滚动，并且我想显示它们中的工具提示，工具提示“泄漏”出容器，因此它被隐藏起来。我在StackOverflow上看到了关于这个问题的其他问题，基本上他们都删除了包含元素的position: relative;，但我需要position: relative;以便工具提示应该在正确的位置呈现。
有一段时间有这个问题，非常感谢帮助！
JSFiddle这里工具提示溢出：滚动;元素

来源

2017-04-05 David Genger

请添加您的代码。 – frnt

任何链接或代码请 – dutchsociety

这里是一个JS小提琴https://jsfiddle.net/eyfoa90L/ –

奥凯感谢你的问题的更新，看看下面的剪断，

.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你有一个像你想样式。

来源

2017-04-05 14:41:29 dutchsociety

这个问题是，这个工具提示是相对定位，因此将占据页面的流程中，我需要一个位置的绝对解决方案 –

看看这个更新的JS小提琴https://jsfiddle.net/t1hvbbj9/ –

再次检查片段，这是你需要什么？ – dutchsociety

您是否确实需要overflow:scroll标签以便您没有滚动条？

如果是这样，我完全删除了overflow - 但不知道这是否是您需要的。它的唯一途径，我可以通过保持做到这一点position:relative

见修订小提琴 - https://jsfiddle.net/eyfoa90L/3/

来源

2017-04-05 14:46:27

我确实需要溢出属性我需要一个解决方案，父母有一个溢出滚动和工具提示有绝对位置https://jsfiddle.net/0qfzxbvk/ –

我想你能不能解决CSS这个问题，这是因为：悬停的CSS属性总是需要的子元素“悬停“元素来使用它的属性。如果您想要解决此问题，您需要将工具提示放在任何获取的父元素之外。

我觉得Javascript和addEventListener（'onmouseover'，函数）是你最好的选择。

来源

2017-04-06 07:09:26 KevDev

工具提示溢出：滚动;元素

回答

相关问题