首先罗列一下配置参数:

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. 什么是Angularjs

    AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅是一个javascript框架,因为 ...

  2. jquery函数理解与运用

    javascript中有多种不用的方式去理解函数,函数类似于我们以前学过的数学函数,但是在程序设计中,我是按照下面的方式进行理解: 函数的理解: 函数是一个代码块,内容被包含在函数内,通常我们是把一些 ...

  3. 【转】http头部详解

    原地址:http://www.cnblogs.com/ziwuge/archive/2011/09/27/2193385.html HTTP 头部解释 1. Accept:告诉WEB服务器自己接受什么 ...

  4. Github初学者教程(一)

    如果你是一名程序员,或者是相关专业的学生,那么Github你不应不知道.很多开源组织和大神,会选择在Github这个平台上,发布他们的开源项目,学会使用Github将能够给你的学习和工作带来巨大帮助! ...

  5. [RT][NOIP2015]联合权值

    1.题面 2.总结 第一次回忆一下当年的题目.但是这道题已经做烂了,只是看还记得树遍历会写么. 然后我写了一下,有点费劲,交上去之后只有70,比较尴尬,看了下去年5月写的代码,发现完全不是一个感觉啊. ...

  6. javascript系列:NaN类型

    NaN,即非数值是一个特殊的数值,这个数值用于表示一个本来要返回数值的操作数未返回数值的情况下. ECMAScript中任何数值除以0会返回NaN,因此不影响其他代码运行.   NaN特点:     ...

  7. 使用docker toolbox 在windows上搭建统一环境

    1.先下载docker toolbox 以下是下载地址: http://get.daocloud.io/#install-docker-for-mac-windows 2.下载安装 git windo ...

  8. 搭建ssh后的简化

    对于SSh框架的简化,我们可以从下面几个方面来剖析: 1.实体类entity 2.注入 3.类注解 下面,我来一一为大家讲解.ps:写的不好还请多多指教,欢迎大家"来找茬". 关于 ...

  9. THINKPHP之连接数据库(全局配置)

  10. day3 Linux基础

    1.正文处理命令及tar命令 1) 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) cat /etc/passwd /etc/group >1.txt2) 将用户信 ...