首先罗列一下配置参数:

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();
});
})();

bootstrap-popover的配置与灵活应用的更多相关文章

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

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

  2. Bootstrap popover弹出框

    popover被挤压.遮挡的问题: 弹出框显示的时候如果贴近一个列的边沿,就会很窄或被遮挡,解决起来很简单,只需在初始化的时候添加一个container属性就可以了: $(function (){ $ ...

  3. bootstrap插件学习-bootstrap.popover.js

    先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} ...

  4. Bootstrap Popover

    [Bootstrap Popover] 1.设置一个popover需要添加以下设置: 1)data-toggle="popover" 2)title="Example p ...

  5. Bootstrap Popover 隐藏的Javasript方法

    Bootstrap Popover是Bootstrap的弹出提示控件.我们可以通过data属性或者Javascript来调用该控件.data属性调用定制性较差这里就不细说了,我们讲一下Javascri ...

  6. 更改BootStrap popover的默认样式

    .popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padd ...

  7. Bootstrap popover源码分析

    /* ======================================================================== * Bootstrap: popover.js ...

  8. bootstrap table--面相配置、hook、适配的表格框架

    bootstrap table--面相配置.hook.适配的表格框架

  9. Bootstrap Popover(弹出框)弹出自定义格式代码

    HEAD 标签之间引入CSS:<link href="../../../public/css/bootstrap.min.css" rel="stylesheet& ...

  10. bootstrap popover 如何在hover状态移动到弹出上不消失

    bootstrap中的popover其实就是对tooltip做了一定升级,拥有了标题和内容 概要 使用的时候依赖第三方插件 依赖tooltip插件 必须初始化 title 和 content 可以在p ...

随机推荐

  1. css3选择器

    原网站 cnblogs.com/tianshang/p/5982513.html通配符选择器 通配选择器的作用就是对页面上所有的元素都生效, 页面上的所有标签都会展示出通配符选择器设定的样式. 这样的 ...

  2. python 入门(一)矩阵处理

    numpy 使用 1.使用 array 定义矩阵 dataSet = array([[1.0,1.1],[1.0,1.0],[0.0,0.0],[0,0.1]]) 2.使用 shape 返回矩阵的行数 ...

  3. Tsinsen A1493 城市规划(DP + CDQ分治 + NTT)

    题目 Source http://www.tsinsen.com/A1493 Description 刚刚解决完电力网络的问题, 阿狸又被领导的任务给难住了. 刚才说过, 阿狸的国家有n个城市, 现在 ...

  4. 第二天ci项目规划 数据库设计

    第二天ci项目规划 数据库设计 商品 + 用户 + 订单 数据库设计思想和方法 关于商品品牌 ,分类 ,属性 如何表示 用一个字段 还是再设计一张表 品牌和商品 是一种信息 还是两种信息 一张表一般只 ...

  5. POJ3461 KMP 模板题

    最近忙着考研复习,所以刷题少了.. 数据结构昨天重新学习了一下KMP算法,今天自己试着写了写,问题还不少,不过KMP算法总归是理解了,以前看v_JULY_v的博客,一头雾水,现在终于懂了他为什么要在算 ...

  6. 【虚拟机】oracle Virtual Box4.2.6虚拟机正在运行的过程中删除了其上的一个备份,之后虚拟机就无法使用了

    原因未知,解决方法没有,网上也没有找到相关的解决方法.偶然的操作导致

  7. [转] 前后端分离开发模式的 mock 平台预研

    引入 mock(模拟): 是在项目测试中,对项目外部或不容易获取的对象/接口,用一个虚拟的对象/接口来模拟,以便测试. 背景 前后端分离 前后端仅仅通过异步接口(AJAX/JSONP)来编程 前后端都 ...

  8. 德国W家HIPP 奶粉有货播报:2014.7.8 HIPP 奶粉 1+ 4盒装有货啦!

    德国W家HIPP 奶粉有货播报:2014.7.8 HIPP 奶粉 1+ 4盒装有货啦!

  9. PHP注册与登录【2】用户注册

    注册页面 reg.html 负责收集用户填写的注册信息.教程里只列出关键的代码片段,完整的代码附在本节最后. 注册表单 <fieldset> <legend>用户注册</ ...

  10. 反编译apk时遇到的问题

    第一次尝试反编译的时候遇到如下问题:Input file (ganzhou) was not found or was not readable 百度之后说是apktool版本2.0以上,编译命令变了 ...