Tooltip arrow disappears when span has overflow-y : auto - css

Question

I have a tooltip that's based on a span that will load some content. The content may have varying size so I have set a max-height and max-width to the span and want it to be able to scroll when the content exceeds this dimensions.
The problem is the arrow disappears whenever I set overflow:scroll;. Is there any workaraound this issue?
Here's the code:
#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;
}
and the tooltip will contain something like this:
<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

I'm not sure this is the cleanest solution, but you could wrap your content with another div like so:
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