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

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

i have tooltip that's based on span load content. content may have varying size have set max-height , max-width span , want able scroll when content exceeds dimensions.

the problem arrow disappears whenever set overflow:scroll;. there workaraound issue?

here's code:

#tooltip { position: absolute; max-height: 300px; max-width:300px; line-height: 20px; overflow: scroll; /*adding makes 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 tooltip contain this:

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

i'm not sure cleanest solution, wrap content div so: html

<div id="tooltip"> <div id="content"> <div> info</div> <div> info</div> <div> info</div> <div> longer max-width info</div> <div> info</div> <div> info</div> <div> 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

css tooltip