스팬에 오버플로가있을 경우 툴팁 화살표가 사라집니다. 자동 :

Question

콘텐츠를로드 할 범위를 기반으로하는 툴팁이 있습니다. 내용의 크기가 다양하므로 범위에 최대 높이와 ​​최대 너비를 설정하고 내용이이 크기를 초과하면 스크롤 할 수 있기를 원합니다.

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> 

Answer 1

나는이 깨끗한 솔루션입니다 확실하지 않다, 그러나 당신이 서로 콘텐츠를 포장 할 수 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