首先罗列一下配置参数:

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. js 怎么屏蔽微信打开网页后的分享

    我们知道 js 可以通过 window.navigator.userAgent 来获取浏览器的相关信息,比如:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537. ...

  2. CentOS 搭建 nginx + tomcat

    安装nginx yum install nginx 修改 nginx.conf, (/etc/nginx/nginx.conf), 网上有人做人所有配置项目的详解. #nu For more info ...

  3. Spring 使用 SLF4J代替 Commons Logging 写日志 异常

    项目的日志更换成slf4j和logback后,发现项目无法启动.错误提示 Caused by: java.lang.NoClassDefFoundError: Lorg/apache/commons/ ...

  4. ACM : POJ 2676 SudoKu DFS - 数独

    SudoKu Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu POJ 2676 Descr ...

  5. Ajax完整篇(转载)

    Ajax 完整教程 第 1 页 Ajax 简介Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用 ...

  6. nodejs redis 发布订阅机制封装

    最近项目使用redis,对publish 和 subscribe的使用进行了了解,并进行了封装. var config = require('../config/config'); var log = ...

  7. php和ajax 服务器端做轮询推送(定义)

    基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性. 一.什么是长连接.长轮询? 用通俗易 ...

  8. MVC框架

    MVC (Modal View Controler)本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用 ...

  9. 通过c程序更改文件的ctime和mtime

    通过c程序更改文件的ctime和mtime与某个文件相同 源文件words.txt [root@bogon ~]# ll words.txt ;ll words.txt -u -rw-r--r-- 1 ...

  10. WebClient 数据传输

    数据提交 post  ,get public string WebClientPost(string PostData, string PostUrl, string Type) { string p ...