div内的垂直滚动条没有溢出-y：滚动

Question

我正在尝试为我的项目创建一个类似的“工具提示”。

问题是父容器应用了“overflow-y：scroll”属性（我需要一个垂直滚动条），当我尝试将它们移出容器时，它只是剪切其子元素。有什么办法可以让我没有溢出的垂直滚动条吗？

这就是我拥有的和我想要实现的目标：

Answer 1

溢出确实消耗了你想要悬挂在一边的任何元素。这就是溢出的作用。出于这个原因，工具提示往往不是与它们相关的元素的子元素，而是绝对定位的顶级元素，用JS来计算。

基本上，你会做类似的事情：

<强> HTML

<div id="tooltip"></div>
<ul>
    <li>
        <a href="#">Todd</a>
        <div class="tooltip-content">Todd is a guy and he's pretty cool.</div>
    </li>
</ul>

基本的想法是拥有一个包含工具提示数据的隐藏div，以及绝对位于顶层的另一个div。

<强>的JavaScript

    $("ul li a").hover(function(){
        //hover in
        $("#tooltip").html($(this).next().html()).show(); // put the content of .tooltip-content into #tooltip, and show it
        // figure out the position of the element we hovered over
        var tt_top = $(this).offset().top,
            tt_left = $(this).offset().left;
        // position the tooltip based on that data
        // same height, left + width of the ul, so the tooltip is on the right side of the ul
        $("#tooltip").css({
            top: tt_top
            left: tt_left + $("ul").width();
        });
    }, function(){
        // hover out
        $("#tooltip").empty().hide(); // empty and hide tooltip
    });

为了简洁起见，我在这里使用了jQuery，但如果你有足够的时间，同样的原则也适用于纯JavaScript解决方案。

<强> CSS

    #tooltip {
        position: absolute;
        display: none;
        /* tooltip styles */
    }

    .tooltip-content {
        display: none;
    }

工具提示容器需要绝对定位。 top和left值是在JavaScript中创建的。添加display:none;，以便在不需要时不会中断页面​​的其余部分。

同时添加display:none;以隐藏.tooltip-content元素，以便它们永远不可见;它们只是工具提示中所需HTML的容器。

我没有测试过这段代码，但是当你想要对抗overflow时，这是所有工具提示的基本原则。