气泡 弹出 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();
});
})();