首先罗列一下配置参数:

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. centos 研究

    默认工具: yum , (Ubuntu: apt-get)

  2. 安卓手持智能POS端上能扫描开单的软件-店面销售开单系统

    安卓移动POS终端上能扫描开单的软件: 一.登录验证,以业务员.密码登录: 二.订单列表,显示相关信息,包括日期.单据号.客户名.金额.单据状态.有新增订单及按特定条件查询订单的功能(日期.客户等). ...

  3. Java操作属性文件之工具类

    最近空闲时间整理一下平时常用的一下工具类,重复造轮子实在是浪费时间,如果不正确或者有待改善的地方,欢迎指教... package com.hsuchan.business.utils; import ...

  4. Java并发编程基础--基本线程方法详解

    什么是线程 线程是操作系统调度的最小单位,一个进程中可以有多个线程,这些线程可以各自的计数器,栈,局部变量,并且能够访问共享的内存变量.多线程的优势是可以提高响应时间和吞吐量. 使用多线程 一个进程正 ...

  5. C# 文件读写

    1.文本文件读写 //读 FileStream fs = new FileStream(filepath, FileMode.Open, FileAccess.Read); StreamReader ...

  6. 网站开发网页广告条不显示,出现ERR_BLOCKED_BY_CLIENT

    原因: 原因很简单,是因为被360浏览器的ad block给屏蔽掉了. 现象: 解决方案: 更换图片文件名,去掉ad,改成其他的字符.

  7. webpack 使用教程--实时刷新测试

    学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器 可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关 ...

  8. CODEVS1090 加分二叉树

    codevs1090 加分二叉树 2003年NOIP全国联赛提高组 题目描述 Description 设一个n个节点的二叉树tree的中序遍历为(l,2,3,…,n),其中数字1,2,3,…,n为节点 ...

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

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

  10. ubuntu14.04 安装 hadoop2.4.0

    转载:ubuntu搭建hadoop-Ver2.6.0完全分布式环境笔记 自己在搭建hadoop平台时,碰到一些困难,按照该博文解决了问题,转载一下,作为记录. 2 先决条件 确保在你集群中的每个节点上 ...