这是一款Bootstrap popover功能扩展jquery插件。该jquery插件在原生Bootstrap popover功能的基础上,添加了一些新的功能,例如自动定位,支持情景模式等。

使用方法

在页面中引入jquery和bootstrap相关文件,以及bootstrap-popover-x.css和bootstrap-popover-x.js文件。

<link href="path/to/bootstrap.min.css" rel="stylesheet">
<link href="path/to/bootstrap-popover-x.css" rel="stylesheet">

<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/bootstrap-popover-x.js"></script>
                
HTML结构

一个Bootstrap Popover的基本HTML结构如下:

<div id="myPopover" class="popover popover-default">
  <div class="arrow"></div>
  <h3 class="popover-title">
    <span class="close pull-right" data-dismiss="popover-x">×</span>
    Title here
  </h3>
  <div class="popover-content">
    Popover content goes here
  </div>
  <div class="popover-footer">
    Footer here
  </div>
</div>
                

然后可以通过一个按钮来触发Popover。

<button class="btn btn-primary btn-lg" data-toggle="popover-x" 
              data-target="#myPopover" 
              data-placement="top">Top</button>                  
                

插件为Popover内置了6种情景模式。

  • popover-default
  • popover-primary
  • popover-info
  • popover-success
  • popover-danger
  • popover-warning
<div id="myPopover" class="popover popover-danger">
  ...
</div>                  
                

你还可以指定Popover出现的位置。

  • right
  • left
  • top
  • bottom
  • top top-left
  • top top-right
  • bottom bottom-left
  • bottom bottom-right
  • left left-top
  • left left-bottom
  • right right-top
  • right right-bottom
  • auto
  • auto-top
  • auto-right
  • auto-bottom
  • auto-left
  • horizontal
  • vertical
<button data-toggle="popover-x" 
        data-target="#myPopover"
        data-placement="top">
        Click me
</button>                
                

最后还可以指定鼠标hover或聚焦按钮是打开Bootstrap Popover。

<button data-toggle="popover-x" 
        data-target="#myPopover"
        data-trigger="hover focus">
        Click me
</button>              
                
初始化插件

也可以通过js代码来初始化Bootstrap Popover。

<-- 例如下面的按钮使用上面相同的popover内容标签 -->
<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>                 
                

该Bootstrap popover功能扩展jquery插件的github地址为:https://github.com/kartik-v/bootstrap-popover-x