My issue involves a tooltip that utilizes a span element to load content. This content can vary in size, so I have set maximum height and width values on the span. My intention is for the content to scroll when it exceeds these dimensions.
The problem arises when I apply overflow:scroll;, as this causes the arrow to disappear. Is there a workaround for this particular issue?
Below is the code snippet in question:
#tooltip {
position: absolute;
max-height: 300px;
max-width: 300px;
line-height: 20px;
overflow: scroll; /*this leads to the arrow disappearing*/
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;
}
The tooltip will display something like the following markup:
<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>