有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的。下表列出了这些选项:

选项名称 类型/默认值 Data 属性名称 描述
animation boolean
默认值:true
data-animation 向弹出框应用 CSS 褪色过渡效果。
html boolean
默认值:false
data-html 向弹出框插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。
placement string|function
默认值:top
data-placement 规定如何定位弹出框(即 top|bottom|left|right|auto)。
当指定为 auto 时,会动态调整弹出框。例如,如果 placement 是 "auto left",弹出框将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
selector string
默认值:false
data-selector 如果提供了一个选择器,弹出框对象将被委派到指定的目标。
title string | function
默认值:''
data-title 如果未指定 title 属性,则 title 选项是默认的 title 值。
trigger string
默认值:'hover focus'
data-trigger 定义如何触发弹出框: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。
delay number | object
默认值:0
data-delay 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:

delay:
{ show: 500, hide: 100 }
container string | false
默认值:false
data-container 向指定元素追加弹出框。
实例: container: 'body'

方法

下面是一些弹出框(Popover)插件中有用的方法:

方法 描述 实例
Options: .popover(options) 向元素集合附加弹出框句柄。
$().popover(options)
Toggle: .popover('toggle') 切换显示/隐藏元素的弹出框。
$('#element').popover('toggle')
Show: .popover('show') 显示元素的弹出框。
$('#element').popover('show')
Hide: .popover('hide') 隐藏元素的弹出框。
$('#element').popover('hide')
Destroy: .popover('destroy') 隐藏并销毁元素的弹出框。
$('#element').popover('destroy')
事例一、

<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title"
data-container="body" data-toggle="popover" data-placement="top"
data-content="顶部的 Popover 中的一些内容">
顶部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title"
data-container="body" data-toggle="popover" data-placement="bottom"
data-content="底部的 Popover 中的一些内容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title"
data-container="body" data-toggle="popover" data-placement="right"
data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div> <script>
$(function (){
$("[data-toggle='popover']").popover();
});
</script>
</div> 事例二、

var maxtip = '最多只能选择6个项目';
$(dom).popover({
html:true,
content: maxtip,
trigger:"manual",
placement:"top"
});

$(dom).popover("show");
setTimeout(function(){
$(dom).popover("hide");
},3000)

bootstrap的popover()的使用的更多相关文章

  1. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  2. bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案

    前言 最近在使用bootstrap的popover插件,效果如下: popover插件的focus模式时表现为当点击按钮时弹出浮动层,在点击浮动层外的任何一处,都隐藏浮动层. 但是在mac下的Safa ...

  3. bootstrap的popover在trigger设置为hover时不隐藏popover

    使用bootstrap的popover,trigger设置为hover时,可以实现当鼠标放置到目标元素上时显示popover,可是无法实现当鼠标移动到popover上时不隐藏popover,在网上找了 ...

  4. 使用Bootstrap的popover标签中嵌入插件,并且为插件注册事件实现Ajax与后台交互

    下午研究了一下bootstrap的popover写了个例子.如果项目很多地方都需要用到可以考虑封装成插件. javascript代码: <script type="text/javas ...

  5. bootstrap static popover

    jq $('.popover').show().css('position','relative');

  6. php中bootstrap框架.popover弹出框,鼠标移动到上面自动显示,离开自动消失

    <div rel="name"></div> <script> $(function(){//显示弹出框 $("[rel=name]& ...

  7. 扩展Bootstrap Tooltip插件使其可交互

    最近在公司某项目开发中遇见一特殊需求,请笔者帮助,因此有了本文的插件.在前端开发中tooltip是一个极其常用的插件,它能更好向使用者展示更多的文档等帮助信息.它们通常都是一些静态文本信息.但同事他们 ...

  8. jQuery与ajax 基础运用

    jQuery是一个轻量级js框架,使用方便快捷,更是封装ajax处理方法,如$.load() $.get() $.post() 等 但最常用的方法还是$.ajax() 一.一般的格式为 $.ajax( ...

  9. 【Yeoman】热部署web前端开发环境

    本文来自 “简时空”:<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言 记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利器,写了<Sp ...

随机推荐

  1. Project Structure 讲解(转)

    项目的左侧面板 项目设置->Project Project Settings -> Modules Sources面板 Paths面板 dependencies面板 Project Set ...

  2. 九度OJ 1040:Prime Number(质数) (递归)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5278 解决:2180 题目描述: Output the k-th prime number. 输入: k≤10000 输出: The k- ...

  3. Complete space 完备空间与柯西序列 巴拿赫空间与完备空间 完备空间与和希尔伯特空间 封闭closed与完备性complete

    http://www.gatsby.ucl.ac.uk/~gretton/coursefiles/RKHS2013_slides1.pdf RKHS: a function space with a ...

  4. Gemini.Workflow 双子工作流入门教程五:业务表单开发

    简介: Gemini.Workflow 双子工作流,是一套功能强大,使用简单的工作流,简称双子流,目前配套集成在Aries框架中. 下面介绍本篇教程:业务表单开发. 业务表单开发 业务表单的开发,和在 ...

  5. MySQL 中事务的实现

    在关系型数据库中,事务的重要性不言而喻,只要对数据库稍有了解的人都知道事务具有 ACID 四个基本属性,而我们不知道的可能就是数据库是如何实现这四个属性的: 在这篇文章中,我们将对事务的实现进行分析, ...

  6. wamp server 安装后 Apache80端口占用

    提示:Your port 80 is actually used by :Server: Microsoft-HTTPAPI/2.0 解决方案:计算机->右键管理->服务和应用程序-> ...

  7. BZOJ 3362 Navigation Nightmare

    一道带权并查集题目. 带权并查集的重点是信息的合并. 这类题出现得并不多,练习一下. #include<bits/stdc++.h> using namespace std; #defin ...

  8. hihocoder(第十周)二叉树(前序中序推后续)递推实现

    题目 : 后序遍历 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在参与过了美食节之后,小Hi和小Ho在别的地方又玩耍了一阵子,在这个过程中,小Ho得到了一个非常有意思 ...

  9. Kafka kafka.common.OffsetOutOfRangeException 问题处理

    最近公司的zk的down掉了,  storm job 重启的时候报出 kafka.common.OffsetOutOfRangeException 异常 网上查询了一些朋友的做法, 自己也看了一下代码 ...

  10. css3立体旋转菜单

    css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...