Bootstrap popover剪辑到包含div的extent [英] Bootstrap popover clipped to extent of containing div

问题描述

我想要将popover包含在可折叠div中： http://jsfiddle.net/nathan9/qgyS7/ 。然而，popover似乎被限制在div的范围。是否有防止裁剪的方法？

 < a href =＃toggledata-toggle = -target =＃toggleonClick =return false;>切换折叠< / a> 
< div id =toggleclass =collapsestyle =background-color：yellow> 
可折叠div的内容。点击弹出式窗口：
< i class =icon-info-signid =info>< / i> 
< / div> 
  

...

 < script> 
 $（'＃info'）。popover（{html：true，placement：'left'，title：'Popover'，content：< ul>< li> The< / li>< li> ; popover< / li>< li>是< / li>< li> clipped。< / li>< / ul> 
< / script> 
  

解决方案

使用定时器总是一个冒险的业务。我使用了一个Mike Lucid的变种，监听可折叠事件，显示和隐藏。

这是一个工作的小提琴

代码如下：

  $（document）.ready（function（）{
 $（'＃toggle'）
 .on（'shown'，function（evnt）{
 $（evnt.target）.addClass（'visible'）; 
}）
 .on（'hide'，function（evnt）{
 $（evnt.target）.removeClass visible）; 
}）
; 
}）; 
  

如果您希望可折叠对象在加载时可见，请不要忘记添加类

编辑 。 / p>

从Bootstrap 2.3开始，工具提示和popover有一个新的容器选项。如果将容器设置为body，您的工具提示和popovers将不会被剪裁。 这是一个工作的小提琴。

希望有帮助。 p>

I want a popover to be contained within a collapsible div: http://jsfiddle.net/nathan9/qgyS7/. However, the popover seems to be limited to the extent of the div. Is there a way to prevent the clipping?

<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>

解决方案

Using timer is always a risky business. I've used a variant of Mike Lucid that listens to the collapsible event, shown and hide.

Here is a working fiddle

The code is as follow:

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

If you want your collapsable to be visible on load, don't forget to add classes in and visible to your collapsable div.

Edit

Starting with Bootstrap 2.3, tooltips and popover have a new container option. If you set the container to 'body', your tooltips and popovers will won't be clipped. Here is a working fiddle.

Hope that helps.

这篇关于Bootstrap popover剪辑到包含div的extent的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！