Question

我有一个工具提示div，它在顶部修改了边框，看起来像箭头，这是由一些前后属性完成的。但是当我在那个div上使用overflow：auto时，那个＆＃34;箭头＆＃34;消失。

如果没有overflow:auto;它应该如何显示： http://jsfiddle.net/nmvh4L6g/1/

overflow: auto;的外观如何： http://jsfiddle.net/nmvh4L6g/2/

对不起我的英文，感谢您的帮助！

Answer 1

在我的脑海中，您可以使用内部div，例如：

<div id="tooltipNotifikace">
    <div>Lorem impsum dolor sit amet</div>
</div>

在CSS中，你使用内部div中的溢出：

#tooltipNotifikace > div {
    max-height: 500px;
    overflow-y: auto;
}

JSFiddle：http://jsfiddle.net/nmvh4L6g/7/

Answer 2

您并非真的需要将overflow-y设置为auto。工具提示会自动调整其高度，直至达到您设置的max-height 500px值。

编辑：

我想我今天感到宽宏大量：

＆＃13;

/* Based on http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/ */
.tooltipWrap {
    position: fixed;
    right: 6px;
    top: 20px;
}
#tooltipNotifikace, .arrow:after {
    background: #fff;
    border: 2px solid #0dbe48;    
}
#tooltipNotifikace {
    color: #1bc204;
    text-align: center;
    padding: 0px 0px 0px 0px;
    width: 350px;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 2px solid #0dbe48;
    z-index:1;
}

.arrow {
  width: 70px;
  height: 18px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  top: -16px;
}
.arrow:after {
  content: " ";
  position: absolute;
  left: 20px;
  top: 10px;
  width: 25px;
  height: 25px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  z-index:2;
}

＆＃13;

<div class="tooltipWrap"><div id="tooltipNotifikace">Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet.</div><div class="arrow"></div></div>

＆＃13;

JSFiddle

溢出前后工作前后不同：自动

2 个答案:

编辑：