Bootstrap 弹出框剪辑到包含 div 的范围答案

【问题标题】：Bootstrap popover clipped to extent of containing divBootstrap 弹出框剪辑到包含 div 的范围
【发布时间】：2023-03-15 18:58:01
【问题描述】：

我希望在可折叠 div 中包含一个弹出框：http://jsfiddle.net/nathan9/qgyS7/。但是，popover 似乎仅限于 div 的范围。有没有办法防止剪裁？

<a href="#toggle" data-toggle="collapse" data-target="#toggle" onClick="return false;">Toggle collapse</a>
<div id="toggle" class="collapse" style="background-color: yellow">
    Content of collapsible div. Click for popover: 
    <i class="icon-info-sign" id="info"></i>
</div>

...

<script>
    $('#info').popover({ html: true, placement: 'left', title: 'Popover', content: "<ul><li>The</li><li>popover</li><li>is</li><li>clipped.</li></ul>" });
</script>

【问题讨论】：

查看这个答案：stackoverflow.com/a/14800781/1478467 (demo)

标签： jquery html css twitter-bootstrap popover

【解决方案1】：

添加.collapse.in {overflow:visible} 似乎可以解决问题

http://jsfiddle.net/ZArX7/

编辑：以上答案仅适用于 chrome

这是一个延迟添加类的 jquery。

     $('#toggle_link').click(function() {
    if($('#toggle').hasClass('in')){
        $('#toggle').removeClass('visible');
    }else{
        setTimeout(function() {
            $('#toggle').addClass('visible');
        }, 1000);
    }
});

此解决方案有效

http://jsfiddle.net/fnP7y/

【讨论】：

不幸的是，这也有破坏手风琴效果的效果 - 即，折叠的 div 的内容立即显示，而不是随着 div 的展开逐渐显示。还有其他方法吗？
我玩这个已经有一段时间了，而迈克的回答似乎是目前最好的选择。我们在 github 上有一个关于弹出框和工具提示的未解决问题，现在可以放置在某些元素上，我将您的小提琴添加到带有工具提示和弹出框的错误列表中 - git hub issue

【解决方案2】：

使用计时器总是有风险的事情。我使用了 Mike Lucid 的变体，它监听可折叠事件，显示和隐藏。

Here is a working fiddle

代码如下：

$(document).ready(function(){
  $('#toggle')
    .on('shown', function(evnt) {
      $(evnt.target).addClass('visible');  
    })
    .on('hide', function(evnt) {
      $(evnt.target).removeClass('visible');  
    })
  ;   
});

如果您希望您的可折叠项在加载时可见，请不要忘记将类 in 和 visible 添加到您的可折叠div。

编辑

从 Bootstrap 2.3 开始，工具提示和弹出框有一个新的 container 选项。如果您将容器设置为“body”，您的工具提示和弹出框将不会被剪裁。 Here is a working fiddle.

希望对您有所帮助。

【讨论】：