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

当span有溢出时，工具提示箭头消失：y：auto

1 个答案: