工具提示溢出：滾動;元素

-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

工具提示溢出：滾動;元素

回答

相關問題