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