气泡 弹出 bootstrap-popover的配置与灵活应用

 <script src="/assets/addons/bootstrap-select/bootstrap-select.min.js"></script>

<script type="text/javascript">
//气泡 弹出
$(function (){
$(".popover-hover").popover({
placement:'left',
trigger: 'hover',
title:'订阅内容延时展示',
});
});
</script>

 

 

bootstrap-popover的配置与灵活应用

首先罗列一下配置参数：

1、animation true/false 是否动画

2、placement 'right'/'left'/top/bottom/function(){return 'right'} 弹出提示的位置

3、selector 目标对象

4、trigger 'hover'/'click'... 触发方式

5、title 标题 如果元素没有指定data-original-title属性，则使用这个默认值

6、content 内容 如果元素没有指定data-content属性，则使用这个默认值

7、delay 显示和隐藏的时间 20/{show:200,hide:300}

 

然后列举一下，我们日常开发中会遇到的问题：

1、如果我要默认为鼠标点击触发事件如何处理？

$('a').popover({
    trigger : 'click'
});

 

2、如果我要点击非目标对象关闭提示层怎么办？

说明：每个提示会生成一个class为popover的div容器，因此只需要在body上绑定一个click事件实现对class为popover的div销毁即可。值得注意的是，目标对象的click事件的冒泡要取消掉。

(function(){
    $body.find('.popovers').each(function(){
        $(this).click(function(e){
            $('.popover').remove();
            e.preventDefault();
            return false;
        });
        $(this).popover({
            trigger : 'click'
        });
    });
    $body.click(function(){
        $('.popover').remove();
    });
})();