css - 跨度溢出时工具提示箭头消失-y : auto

Question

我有一个基于跨度的工具提示，它将加载一些内容。内容可能有不同的大小，所以我为跨度设置了最大高度和最大宽度，并希望它能够在内容超过此尺寸时滚动。

问题是每当我设置overflow:scroll; 时箭头就会消失。有解决这个问题的方法吗？

代码如下:

#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;
}

工具提示将包含如下内容:

<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

我不确定这是最干净的解决方案，但您可以像这样用另一个 div 包装您的内容:

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