Question

我一直在尝试使引导扩展程序Popover X正常工作（http://plugins.krajee.com/popover-x）

我设置了一个JS小提琴（http://jsfiddle.net/wp80d5ux/2/），但似乎没有加载弹出窗口。

下面是我的例子。

我加载库不正确吗？

<BR><BR><BR><BR><button id="#btn1" class="btn btn-primary btn-lg">Top</button>
<script>
$(document).on('ready', function() {
    // initialize popover on click of `#btn1`
    $('#btn1').popoverButton({
        target: '#myPopover1'
    });
    // or alternatively initialize popover on hover of `#btn1`
    $('#btn1').popoverButton({
        target: '#myPopover1',
        trigger: 'hover focus'
    });
});
</script>

Answer 1

这在本地为我工作，但是由于某种原因我无法使其在jsfiddle上工作...（在plnkr上工作）

<BR><BR><BR><BR><button type="button" id='btn1' class="btn btn-primary btn-lg">Top</button>


<div id="myPopover1" style='display:none' class="popover popover-x popover-default">
    <div class="arrow"></div>
    <div class="popover-header popover-title"><button class="close" data-dismiss="popover-x">&times;</button>Title</div>
    <div class="popover-body popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-secondary">Reset</button>
    </div>
</div>

<script>
$(document).ready(()=>{
    $('#btn1').popoverButton({
        target: '#myPopover1'
    });       
})
</script>

此处引导4代码

 <div id="myPopover2" style="display: none" class="popover popover-default">
        <div class="arrow"></div>
        <div class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</div>
        <div class="popover-content">
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneancommodo ligula eget dolor. Aenean massa.</p>
        </div>
 </div>
 <button type="button"  id='weinz' class="btn btn-secondary">
      Popover on top
 </button>
<script>
    $(document).ready(()=>{
       $('#weinz').popover({
        content:$('#myPopover2')
       }) 
    })
    </script>

Bootstrap PopoverX方法未触发

1 个答案: