The tooltip disappears when the range has an overflow -y: auto
I have a range based hint that will download some content. The content can be of different sizes, so I have set a maximum height and maximum width for the range and I want it to be able to scroll when the content exceeds those dimensions.
The problem is that the arrow disappears whenever I install overflow:scroll;
. Is there a problem with 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>
+3
source to share
1 answer
I'm not sure if this is the cleanest solution, but you can wrap your content in another div like this:
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;
}
+2
source to share