3

一部のコンテンツをロードするスパンに基づくツールチップがあります。コンテンツのサイズはさまざまである可​​能性があるため、スパンにmax-heightとmax-widthを設定し、コンテンツがこのサイズを超えたときにスクロールできるようにしました。

問題は、設定するたびに矢印が消えることです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>
4

1 に答える 1

2

これが最もクリーンなソリューションかどうかはわかりませんが、次のようにコンテンツを別の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

于 2013-02-13T20:31:57.610 に答える