jquery – Bootstrap popover剪裁到包含div的范围

前端之家收集整理的这篇文章主要介绍了jquery – Bootstrap popover剪裁到包含div的范围前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要一个popover包含在一个可折叠的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>

解决方法

使用计时器始终是一项有风险的业务.我使用了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');  
    })
  ;   
});

如果您希望可折叠在加载时可见,请不要忘记在可折叠div中添加类和可见.

编辑

从Bootstrap 2.3开始,工具提示和弹出框有一个新的容器选项.如果将容器设置为“body”,则不会剪切工具提示和弹出窗口. Here is a working fiddle.

希望有所帮助.

原文链接:https://www.f2er.com/jquery/178503.html

猜你在找的jQuery相关文章