Bootstrap JavaScript插件：弹出框（popover.js）

作者:WangMin
格言:努力做好自己喜欢的每一件事

• 弹出提示（popover.js）是工具提示的子类，它比工具提示多了一个 content 参数，是工具提示插件的拓展，并且弹出框依赖于工具提示插件tooltip.js，如果你定制了 Bootstrap，就一定要将依赖的插件编译进去。

• 初始化。由于性能的原因，工具提示和弹出框的 data 编程接口（data api）是必须要手动初始化的。在一个页面上一次性初始化所有弹出框的方式是通过data-toggle属性选中他们：

$(function () {
   
   
    $('[data-toggle="popover"]').popover();
})

你也可以单独初始化某个元素上的弹出提示对象。比如，以下代码就只激活 a标签的链接元素上定义的弹出提示：

<a href="#" data-toggle="popover" title="Hello" data-content="Hi, Long time no see, how are you?">Say Hello</a>

$(function(){
   
   
    $('a').popover();
})

与工具提示不同的是，默认情况下，在鼠标单击链接时，才会显示工具提示。并且，弹出提示的默认位置在目标对象的右侧。运行效果如下：

通过 data-placement 属性，可以设置提示信息的显示位置，可选值有 top | bottom | left | right。如图所示：

• 默认情况下，弹出提示一旦显示，就不会再隐藏。如果希望点击空白区域让弹出框消失，只需设置data-trigger="focus"属性即可。为了更好的跨浏览器和跨平台效果，你必须使用<a>标签，而不能使用<button>标签，并且，还必须包含role="button"和tabindex属性。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>

设置data-trigger="focus"属性以后，在链接上点击，会弹出提示信息，点击链接和提示框之外的空白区域，提示框便自动消失。

弹出提示插件的选项

Bootstrap为工具提示插件提供了 11 个选项，所有的选项都可以通过 data 属性或JavaScript进行设置。

表中 [1] 表示：
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

因为弹出框是以工具提示为基础，它继承了工具提示的选项，并且多了'content'这个选项，如上表所示。
其使用选项的方式与工具提示一样，如下：

<a href="##" id="bird">小鸟</a>

$('#bird').popover({
   
   
    html: true,
    title: '<img src="../img/timg.jpg" width="200px" height="200px"/>',
    placement: 'bottom',
    delay: {
   
    show: 500, hide: 100 }
});

运行效果如下：

弹出提示插件的方法

1、.popover(options)
使用一个可选的对象参数 options调用某个页面元素的弹出提示。如：

$('某个元素').popover({
   
   
    html:true,
    title:'<p>一只小鸟</p> <img src="../img/timg.jpg" width="170px" height="170px"/>',
    placement:'bottom',
    delay:{
   
   show:500,hide:100}
})

2、.popover('show')
手动触发某个页面元素的弹出提示，如：

$('#element').popover('show')

3、.popover('hide')
手动隐藏某个页面元素的弹出提示，如：

$('#element').popover('hide')

4、.popover('toggle')
手动打开或隐藏某个页面元素的弹出提示，如：

$('#element').popover('toggle')

5、.popover('destroy')
手动隐藏并销毁某个页面元素的弹出提示。如：

$('#element').popover('destroy')

弹出框插件的事件

 $('#myTooltip').on('hidden.bs.popover', function () {
   
   
     alert("弹框已经隐藏。");
 });

就先分享到这里!! :smile: 后续继续更新!!