跨度溢出時，工具提示箭頭消失-y：自動

我有一個基於跨度的工具提示，它將加載一些內容。內容可能有不同的大小，所以我設置了跨度的最大高度和最大寬度，並希望當內容超過此尺寸時，它可以滾動。跨度溢出時，工具提示箭頭消失-y：自動

問題是當我設置overflow:scroll;時，箭頭消失。有沒有什麼工作可以解決這個問題？

下面的代碼：

#tooltip { 
    position: absolute; 
    max-height: 300px; 
    max-width:300px; 
    line-height: 20px; 
    overflow: scroll; /*adding this makes the arrow disappear*/ 
    padding: 10px; 
    font-size: 14px; 
    text-align: left; 
    color: #fff; 
    background: #2e31b1; 
    border: 4px solid #2e31b1; 
    border-radius: 5px; 
    text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px; 
    box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 2px 0px; 
} 

#tooltip:after { 
    content: ''; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-width: 10px; 
    border-style: solid; 
    border-color: transparent #2e31b1 transparent transparent; 
    top: 10px; 
    left: -24px; 
}

和工具提示將包含這樣的事情：

<span id="tooltip"> 
    <div> some info</div> 
    <div> some info</div> 
    <div> some info</div> 
    <div> some longer than max-width info</div> 
    //more than max-height pixels worth of divs 
    <div> some info</div> 
</span>

來源

2013-02-13 scanales

我不知道這是乾淨的解決方案，但你可以與其他包裝你的內容DIV像這樣：

HTML

<div id="tooltip"> 
    <div id="content"> 
    <div> some info</div> 
    <div> some info</div> 
    <div> some info</div> 
    <div> some longer than max-width info</div> 
    <div> some info</div> 
    <div> some info</div> 
    <div> some info</div> 
    </div> 
</div>

CSS

#tooltip { 
    position: absolute; 
} 
#content { 
    font-size: 14px; 
    color: #fff; 
    max-height: 100px; 
    max-width:300px; 
    line-height: 20px; 
    overflow: scroll; 
    background: #2e31b1; 
    padding: 10px; 
    border: 4px solid #2e31b1; 
    border-radius: 5px; 
    text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px; 
    box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 2px 
} 
#tooltip:after { 
    content: ''; 
    position: absolute; 
    width: 5px; 
    height: 0; 
    border-width: 10px; 
    border-style: solid; 
    border-color: transparent #2e31b1 transparent transparent; 
    z-index:999; 
    top: 10px; 
    left: -24px; 
}

Jsbin：http://jsbin.com/ukaxof/1/edit

來源

2013-02-13 20:31:57 estrar

跨度溢出時，工具提示箭頭消失-y：自動

回答

相關問題