Question

我正在开发一个Web应用程序，我想在用户点击它时动态显示gylphicon下面的bootstrap popover。这是代码人员。以下是描述问题http://imgur.com/7wLLWfF

的图片

popover有时会显示在图标的正下方，有时它不显示在图标下方。那么如何解决这个问题？

 <div class="col-md-12 col-sm-12">
Know More.&nbsp;&nbsp;<i class="fa fa-info-circle show-popover"></i>
</div>

$(".show-popover").popover({                    
    content: "Some content here",
    html: true,
    placement: "bottom"                 
});

以下是来自萤火虫的生成的HTML

<div id="popover351747" class="popover fade bottom in" role="tooltip" style="top: 44.9167px; left: 187.867px; display: block;">
<div role="tooltip" class="popover fade bottom in" id="popover122538" style="top: 44.9167px; left: 305.2px; display: block;"><div class="arrow" style="left: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content"><img src="./images/test.png" class="img-responsive"></div></div>
<div role="tooltip" class="popover fade bottom in" id="popover127530" style="top: 44.9167px; left: 213.2px; display: block;"><div class="arrow" style="left: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content"><img src="./images/test.png" class="img-responsive"></div></div>
<div id="popover566481" class="popover fade bottom in" role="tooltip" style="top: 69.2px; left: 83.8333px; display: block;">
<div class="popover fade bottom in" role="tooltip" id="popover312725" style="top: 45px; left: 309.8828125px; display: block;"><div class="arrow" style="left: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content"><img class="img-responsive" src="./images/test.png"></div></div>

Twitter bootstrap的popover动态设置左侧和顶部值

0 个答案: