Question

我有一些模糊的东西如下：

<div id="body">
  surrounding text 
  <div id="pane" style="overflow: auto; height: 500px; width: 500px;">
    lots and lots of text here
    <span id="some_bit">tooltip appears below-right of here</span>
  </div>
  more surrounding text (should be overlapped by tooltip)
</div>

和

<div id="tooltip" style="width: 100px; height: 100px;">Whee</div>

我想要做的是插入工具提示，使其位于上面它所在的窗格。如果它附加到窗格边界旁边的元素（如上所述），那么它应该在窗格上方以及窗格周围的文本上方可见。

它不应该a）扩展窗格，这样你必须向下滚动才能看到工具提示（如在http://saizai.com/css_overlap.png中），或者b）被切断，所以你看不到所有的工具提示

我用JS插入这个，所以我可以根据需要添加一个包装器position:relative div等，计算偏移量并使其成为position:absolute等等。我宁愿不假设任何事情窗格的position属性 - 工具提示应该是可插入的，只有最小的可能页面布局假设。（这只是一个例子。）

这是我正在编写的原型工具提示库，它将是开源的。

ETA：http://jsfiddle.net/vCb2y/5/像我想要的那样行为（如果你继续重新悬停触发器文本），但是需要我更新所有DOM更改的工具提示的位置滚动行为。我宁愿使用纯CSS / HTML定位工具提示，以便它具有相同的视觉行为（即它重叠所有其他元素）但在DOM更改，滚动时保持相对于目标的位置，等

ETA 2：http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp（保持默认值除了设置青色div'a'到位置：相对;想象'A'是窗格，'a'是工具提示）似乎更接近我想要的行为，但是我无法让它在其他地方工作。请注意，如果您创建“A”overflow: auto，则会破坏“a”的重叠行为。

Answer 1

我无法想到一个纯HTML / CSS解决方案。

溢出声明是这里的问题。如果工具提示位于#pane：

您在#pane中建立了一个定位上下文，然后工具提示显示在#some_bit旁边（无论滚动等），但它会被切断。
你不建立一个定位上下文，然后工具提示不被剪裁，但它不知道#some_bit在页面上的位置。

我担心你需要JS来监控页面上#some_bit的位置并相应地定位工具提示。一旦#some_bit位于查看区域之外，您还需要终止该工具提示（如果触发器是鼠标悬停，则不会出现问题）。

实际上，如果触发器是鼠标悬停，那么您可能需要使用光标坐标来定位工具提示（而不是计算#some_bit的位置）。

Answer 2

编辑：使用CSS

#tooltip {
    z-index: 9999;
    display: none;
    position: absolute;
}

JS使用

注意：在jQuery中，但应该很容易将其更改为Prototype语法。

$('#some_bit').hover(function() {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    // hovered element
    var offset = $(this).offset();
    var top = offset.top + docViewTop;
    var left = offset.left;
    var width = $(this).width();
    var height = $(this).height();
    var right = left + width;
    var bottom = top + height;

    // pane
    var poffset = $('#pane').offset();
    var ptop = poffset.top + docViewTop;
    var pleft = poffset.left;
    var pwidth = $('#pane').width();
    var pheight = $('#pane').height();
    var pright = pleft + pwidth;
    var pbottom = ptop + pheight;

    // tooltip
    var ttop = bottom;
    var tleft = right;
    var twidth = $('#tooltip').width();
    var theight = $('#tooltip').height();
    var tright = tleft + twidth;
    var tbottom = ttop + theight;

    if (tright > pright)
        tleft = pright - twidth;
    if (tbottom > pbottom)
        ttop = pbottom - theight;
    if (tbottom > docViewBottom)
        ttop = docViewBottom - theight;
    $('#tooltip').offset({top: ttop, left: tleft});
    $('#tooltip').css('display', 'block');
}, function() {
    $('#tooltip').hide();    
});

修改：见here。

Answer 3

我只是将工具提示放在#pane div之外，并使用JavaScript完全定位它，因为你仍然在使用JS。

我不使用Prototype所以我不知道它是如何在Prototype中完成的，但是在jQuery中，你使用$(element).position()来获取元素位置。如果您必须手动执行此操作，则为a little more complicated。

并且您可能希望添加一些额外的逻辑来防止工具提示扩展到文档之外。

CSS：子div重叠父级

3 个答案: