Bootstrap 教程
Bootstrap Popover（弹出框）
Bootstrap Popover（弹出框）是使用定制的 Jquery 插件创建的。它可以用来显示任何元素的一些信息。
在本教程中，您将看到如何使用 Bootstrap Popover，以及如何使用一些可用选项进行定制。
您必须引用 Jquery、Bootstrap CSS 和两个 JavaScript files - 一个用于 Bootstrap Tooltip（工具提示插件），一个用于 Bootstrap Popover（弹出框）。
用于 Tooltip（工具提示插件）的 JS 文件位于您的 Bootstrap 文件夹中的 js 文件夹下，名为 bootstrap-tooltip.js。用于 Popover（弹出框）的 JS 文件位于您的 Bootstrap 主文件夹中的 js 文件夹下，名为 bootstrap-popover.js。Jquery 位于您的 Bootstrap 主文件夹中的 docs & assets & js 下，名为 jquery.js。或者您可以直接访问 /ajax/libs/jquery/1.7.1/jquery.min.js 下载 Jquery。
请确保您在下载 bootstrap-popover.js 之前先下载 bootstrap-tooltip.js。弹出框依赖工具提示插件，因此需要先加载工具提示插件。
&div class="container"&
&&&&&h2&使用Bootstrap创建弹出框&/h2&
&&&&&div class="well"&
&&&&&&&&&a href="#" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover"&hover for popover&/a&
&&&&&/div&
&script src="/ajax/libs/jquery/1.7.1/jquery.min.js"&&/script&
&script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"&&/script&
&script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"&&/script&
&&&&$(function ()
&&&&{ $("#example").popover();
下面的表格解释了上面的代码。它将帮助您理解如何使用 Bootstrap Popover（弹出框）。
id=&example&
分配给相关锚的 id，id 的值指向后边要实现 popover（弹出框）的 JavaScript。
class=&btn btn-danger&
创建一个按钮。btn btn-danger 是实例中使用的 class。您可以使用 Bootstrap CSS 中任何其他的 class，或者使用您自己定义的 class。
data-content=&It's so simple to create a tooltip for my website!&
data-content 的值显示在 popover（弹出框）的主体中。
data-original-title=&Bootstrap Popover&
data-original-title 的值显示为 popover（弹出框）的标题。
hover for popover
&script src=&/ajax/libs/
jquery/1.7.1/jquery.min.js&&&/script&
引用 Jquery。
&script src=&../bootstrap/twitter-bootstrap-v2/
js/bootstrap-tooltip.js&&&/script&
引用 Bootstrap Tooltip（工具提示插件）的 JS 文件。
&script src=&../bootstrap/twitter-bootstrap-v2/js/
bootstrap-popover.js&&&/script&
引用 Bootstrap Popover（弹出框）的 JS 文件。
$(function ()
准备文档。Jquery 命令。
$(&#example&).popover();
访问 id example，并在上面实现 popover()。
这里我们没有在 box 外创建 popover（弹出框），不通过任何的定制，即没有通过 popover() 使用任何的选项。
所以，我们可以总结出 Bootstrap Popover（弹出框）的用法是：
$(function ()
{ $("identifier").popover(options);
其中 identifier 是一个 Jquery 选择器，用于标识相关的容器元素。接下来，我们来看看 options 都有哪些。
下面是一些通过 popover() 定制 Popover（弹出框）外观和感观时可能使用到的选项。
animation 值的类型是 boolean，默认值是 true。用于给 tooltip（工具提示插件）带来 css 渐变过渡效果。
placement 值的类型可以是 string 或者 function，默认值是 'right'，top、bottom 和 left 是其他几个可以使用的值。这个选项用于决定环绕锚文本周围的 Popover（弹出框）是位置。下面是一个使用 placement 选项的实例。
&!DOCTYPE html&
&html lang="en"&
&&&&&meta charset="utf-8"&
&&&&&title&Bootstrap 弹出框位置选择的实例&/title&
&&&&&meta name="description" content="Creating Modal Window with Twitter Bootstrap"&
&&&&&link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"&
&&&&&style&
&&&&&&&&a {
&&&&&&&&&&&&margin-left : 400
&&&&&/style&
&div class="container"&
&&&&&h2&使用Bootstrap plcement 选项创建弹出框&/h2&
&&&&&div class="well"&
&&&&&&&&&a href="#" id="example" class="btn btn-success" rel="popover" data-content="为我的网站创建一个提示框如此简单！" data-original-title="Twitter Bootstrap 弹出框"&悬停弹出&/a&
&&&&&/div&
&&&&&div class="well"&
&&&&&&&&&a href="#" id="example_left" class="btn btn-success" rel="popover" data-content="为我的网站创建一个提示框如此简单！" data-original-title="Twitter Bootstrap 弹出框"&悬停弹出&/a&
&&&&&/div&
&&&&&div class="well"&
&&&&&&&&&a href="#" id="example_top" class="btn btn-success" rel="popover" data-content="为我的网站创建一个提示框如此简单！" data-original-title="Twitter Bootstrap 弹出框"&悬停弹出&/a&
&&&&&/div&
&&&&&div class="well"&
&&&&&&&&&a href="#" id="example_bottom" class="btn btn-success" rel="popover" data-content="为我的网站创建一个提示框如此简单！" data-original-title="Twitter Bootstrap 弹出框"&悬停弹出&/a&
&&&&&/div&
&script src="/ajax/libs/jquery/1.7.1/jquery.min.js"&&/script&
&script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"&&/script&
&script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"&&/script&
&&&&$(function ()
&&&&{ $("#example").popover();
&&&&&&&&$("#example_left").popover({placement:'left'});
&&&&&&&&$("#example_top").popover({placement:'top'});
&&&&&&&&$("#example_bottom").popover({placement:'bottom'});
selector 值的类型是 string，默认值是 false。通过使用该选项可以把 Tooltip 对象授权给定的目标。
trigger 值的类型可以是 string，默认值是 'hover'，focus 和 manual 是其他可以使用的值。这个选项用于决定 tooltip（工具提示插件）如何开始。下面的实例演示了如何使用 focus 选项触发 Popover（弹出框）。
&div class="container"&
&&&&&h2&使用Bootstrap trigger 选项创建弹出框&/h2&
&&&&&div class="well"&
&&&&&&&&&a href="#" id="example" class="btn btn-success" rel="popover" data-content="为我的网站创建一个提示框如此简单！" data-original-title="Twitter Bootstrap 弹出框"&悬停弹出&/a&
&&&&&/div&
&script src="/ajax/libs/jquery/1.7.1/jquery.min.js"&&/script&
&script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"&&/script&
&script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"&&/script&
&&&&$(function ()
&&&&{ $("#example").popover({trigger: 'focus'});
title 值的类型可以是 string 或 function，默认值是 ''。即默认不显示 title 属性的值。
content 值的类型可以是 string 或 function，默认值是 ''。即默认不显示 data-content 属性的值。下面是一个使用 title 和 data-content 选项的实例。该实例也演示了如何把多个选项一起使用。
&div class="container"&
&&&&&h2&Bootstrap弹出框使用title和content选项&/h2&
&&&&&div class="well"&
&&&&&&&&&a href="#" id="example" class="btn btn-success" rel="popover"&悬停弹出&/a&
&&&&&/div&
&script src="/ajax/libs/jquery/1.7.1/jquery.min.js"&&/script&
&script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"&&/script&
&script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"&&/script&
&&&&$(function ()
&&&&{ $("#example").popover({title: 'Twitter Bootstrap Popover', content: "为我的网站创建一个提示框如此简单！"});
delay 值的类型可以是 number 或 object，默认值是 0。这决定了显示和隐藏 popover（弹出框）的等待时间，以毫秒为单位。如果值设置为一个数字，则等待时间会应用于显示和隐藏。如果值设置为一个对象，则结构为 delay: { show: 500, hide: 100}，其中 500 和 100 是以毫秒为单位的。
Popover 弹出窗口的默认标记是位于 bootstrap-popover.js 文件的行号 92。如下所示：
template: '&div class="popover"&&div class="arrow"&&/div&&div class="popover-inner"&&h3 class="popover-title"&&/h3&&div class="popover-content"&&p&&/p&&/div&&/div&&/div&'
您可以更改它，放上您自己的标记。
Popover 弹出窗口的默认样式位于行号 3027 到 3118。您可以修改它，放上您自己的样式。
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码1 设置延时， 超过该延时未移入弹窗则弹窗隐藏
Tooltip.prototype.init = function{中的
var triggers = this.options.trigger.split(' ')后面加上
//设置延时
if (this.options.trigger.indexOf('hover') & -1) {
$.extend(true, this.options, { delay: { hide: 100 } });
2 控制不消失代码
在Tooltip.prototype.enter = function (obj) {中的
clearTimeout(self.timeout)后加入
if (self.options.trigger.indexOf('hover') & -1) {
self.$tip.unbind('mouseenter').bind('mouseenter', function (e) {
self.$tip.data('data-element', self.$element);//触发popover框的点击事件时可以获取id
clearTimeout(self.timeout);
self.hoverState = 'in';
}).unbind('mouseleave').bind('mouseleave', function (e) {
self.hoverState = 'out';
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
　　bootstrap版本：v3.3.6
阅读(...) 评论()全面解析Bootstrap中tooltip、popover的使用方法
作者：小龙女先生
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细解析了Bootstrap中tooltip、popover的使用方法，了解提示框、弹出框的实现原理，感兴趣的朋友可以参考一下
一、tooltip（提示框）
&源码文件：
&Tooltip.js
Tooltip.scss
实现原理：&
1、获取当前要显示tooltip的元素的定位信息（top、left、bottom、right、width、height等）
2、计算tooltip的位置，是top、left、bottom、right其中一个
3、然后根据计算的位置值，运算出坐标值
4、给tooltip应用坐标值&
源码分析：&
1、ownerDocument：文档；包含两个对象：&DocType&、documentElement（根节点）
2、$.contains(domA, domB)：判断domA是否包含domB元素
3、应用了offset.setOffset方法，传入了using参数，因为offset设置值的时候，不能四舍五入
4、$viewport：显示tooltipr的容器元素
5、getPosition：此函数获取元素定位坐标相关的信息，如：top、left、bottom、right、width、height、scroll等
& 5.1、共用到了getBoundingClientRect方法，但此方法在IE8-会插件width、height
& 5.2、如果是body，width、height会被重置为window的
& 5.3、源码如下：&
$element = $element || this.$element //如果没有传入参数，则以$element（触发tooltip事件的元素）为准
var el = $element[0]
var isBody = el.tagName == 'BODY'
var elRect = el.getBoundingClientRect()
if (elRect.width == null) {
// width and height are missing in IE8, so c see /twbs/bootstrap/issues/14093
elRect = $.extend({}, elRect, { width: elRect.right - elRect.left, height: elRect.bottom - elRect.top })
var elOffset = isBody ? { top: 0, left: 0 } : $element.offset()
var scroll = { scroll: isBody ? document.documentElement.scrollTop || document.body.scrollTop : $element.scrollTop() }
var outerDims = isBody ? { width: $(window).width(), height: $(window).height() } : null
return $.extend({}, elRect, scroll, outerDims, elOffset)
6、getCalculatedOffset：计算tooltip的坐标值，利用的是width、height折半原理实现
& 6.1、bottom时
&&& 6.1.1、top为定位元素（pos）的top+ 定位元素(pos)的高度
&&& 6.1.2、left为定位元素(pos)的Left – 定位元素(pos)的宽度/2 – tooltip元素宽度/2
& 6.2、top时
&&& 6.2.1、top为定位元素(pos) 的top-tooltip元素的高度
&&& 6.2.2、left为定位元素(pos)的left – 定位元素(pos)的宽度/2 – tooltip元素宽度/2
& 6.3、left时
&&& 6.3.1、top为定位元素(pos)的top – 定位元素(pos)的高度/2 – tooltip元素高度/2
&&& 6.3.2、left为定位元素(pos)的left – tooltip元素的宽度
& 6.4、right时
&&& 6.4.1、top为定位元素(pos)的top – 定位元素(pos)高度/2 – tooltip元素高度/2
&&& 6.4.2、left为定位元素(pos)的left + 定位元素(pos)宽度
&6.5、小三角的位置，一般情况下元素的50%的位置，但如果出现tooltip被left、top、right、bottom隐藏的时候，就需要重新计算和调整位置了。方法名为：getViewportAdjustedDelta
&&&& 6.5.1、首先计算出被overflow的宽度、或者高度
&&&& 6.5.2、然后计算出arrowDelta的值，隐藏值 * 2 –tooltip宽度 + tooltip宽度
&&&& 6.5.3、设置三角的top或left百分比的值&
二、Popover（弹出框）
&源码文件：&
Popover.js
Popover.scss
实现原理：&
1、继承tooltip实现的
2、多了一个标题，还可以自定义content（里面可以插入input、button等交互控件）
如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具