允许元素的前后内容覆盖父级溢出限制

Question

我将div其overflow属性设置为scroll，以便查看所有包含的字段而不会占用太多页面空间。每个字段都有一个跨度（该字段的标题）和关联的输入。我为用户提供了悬停在跨度上的可能性，并提供了一些有用的信息作为工具提示。我在跨度悬停时使用跨度after和before伪元素，以便添加自定义的工具提示。但是，工具提示显示受父div溢出限制的限制。

这是呈现的HTML的示例：

<div id="ContentPlaceHolder1_leftDiv" class="l-custom-left">     
    <div class="personalizedFields">
        <table>
            <tr>
                <td>
                    <span title="Champ associé: Prenom" class="tooltip">Prénom</span>
                </td>
            </tr>
            <tr>
                <td>
                    <input name="ctl00$ContentPlaceHolder1$ucPF$ucCustomField36$field36" type="text" id="field36" />

                </td>
            </tr>

            <tr>
                <td>
                    <span title="Champ associé: Nom" class="tooltip">Nom</span>
                </td>
            </tr>
            <tr>
                <td>
                    <input name="ctl00$ContentPlaceHolder1$ucPF$ucCustomField37$field37" type="text" id="field37" />

                </td>
            </tr>
        </table>
    </div>
</div>

父div和span的CSS：

.l-custom-left
{
    overflow-x: hidden;
    width: 250px;
    height: 50vh;
}

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 10px;
    position: absolute;
    z-index: 98;
}

.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

如何允许内容前后的跨区“覆盖” div父级溢出限制？

JS小提琴

Answer 1

如果您确实希望此方法有效，则有两种方法。第一种是使用JavaScript（我不会介绍）将元素放置在容器外部元素的位置。这是一个令人讨厌的修复程序，在CSS3出现之前，我不得不实施了太多次，以至于无法计数。

第二个更为优雅，但确实破坏了HTML的语义。您的:before和:after伪元素不会从滚动容器中弹出的原因是，它们.tooltip和元素的子元素一样被对待，因此即使绝对放置它们，滚动容器的一部分文档流也是如此。

那么我们该如何处理呢？我们作弊，简单明了。

在span喜欢之后添加第二个元素：

<span class="tooltip">Prénom</span>
<span title="Champ associé: Prenom" class="tooltip-hovershim">Prénom</span>

我们保留相同的内容，以使元素的大小相同。

然后，像这样修改您的CSS：

.tooltip, .tooltip-hovershim
{
    display: inline;
}

.tooltip:hover:after, .tooltip-hovershim:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 10px;
    position: absolute;
    z-index: 98;
}
.tooltip-hovershim { 
    position: absolute;
    transform: translateX(-100%);
    color: transparent;
}

.tooltip:hover:before, .tooltip-hovershim:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

瞧！Vous avez votreélément飘浮剂。就这么简单。

JSFiddle示例

^{为简洁起见，仅适用于前两个元素。}

仅用于拉屎和咯咯笑，这是Javascript变体

具有JS变体的JSFiddle

这是Javascript的关键部分：

var span_labels = document.querySelectorAll('.personalizedFields td span'),
    label_house = document.createElement('div');

document.body.appendChild(label_house);
label_house.setAttribute('class', 'tooltip-hoverer');

for (var i=0,l=span_labels.length;i<l;i++){
  var curr_label = span_labels[i];
    curr_label.addEventListener('mouseover', function(e) {
       e.preventDefault();
       label_house.innerHTML = e.target.getAttribute('title');
       var xy = getOffset(e.target);
       label_house.style.top = (xy.top - 26) + 'px';
       label_house.style.left = (xy.left) + 'px';
       label_house.style.display = 'block';
    });
    curr_label.addEventListener('mouseout', function() {
       label_house.style.display = 'none'; 
    });
}

function getOffset(el) {
    var elementRectangle = el.getBoundingClientRect();
    var _x = elementRectangle.left;
    var _y = elementRectangle.top + el.offsetParent.scrollTop;
    return { top: _y, left: _x };
}