bootstrap源码学习与示例：bootstrap-popover
bootstrap-popover是bootstrap-toolbar的子类。它就比toolbar多一个content参数，其他就是一些默认值不同。与toolbar一样没有自定义事件。
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| animation | 布尔值 | true | 为弹出提示添加一个淡入的过渡。 |
| placement | 字符串或函数 | \'right\' | 弹出提示的位置：top | bottom | left | right。 |
| selector | 字符串 | false | 如果提供了selector，将对符合条件的某个或多个元素启用工具提示。 |
| trigger | 字符串 | \'hover\' | 弹出提示的触发方式：鼠标经过(hover) | 获得焦点(focus) | 手动触发(manual) |
| title | 字符串或函数 | \'\' | 如果元素没有指定\'title\'属性，就使用该值做为默认的标题。 |
| content | 字符串或函数 | \'\' | 如果元素没有指定\'data-content\'属性，就使用该值做为默认的内容。 |
| delay | 数字或对象 | 0 |
显示和隐藏时的延迟时间(以毫秒计) 如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。 如果是一个对象，其结构就是: |
不过最近2.2.3有点奇怪，它默认的触发事件是点击。
由于是子类，因此引入JS，至少引入四个JS文件：jquery库，bootstrap-transition.js，bootstrap-tooltip.js与bootstrap-popover.js
!function ($) {
"use strict"; // jshint ;_;
/* POPOVER PUBLIC CLASS DEFINITION
* =============================== */
var Popover = function (element, options) {
this.init(\'popover\', element, options)
}
/* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
========================================== */
Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, {
constructor: Popover
,
setContent: function () {
var $tip = this.tip()//取得模板
, title = this.getTitle()//取得标题
, content = this.getContent()//取得正文
$tip.find(\'.popover-title\')[this.options.html ? \'html\' : \'text\'](title)
$tip.find(\'.popover-content\')[this.options.html ? \'html\' : \'text\'](content)
//移除原先的所有位置与特效的类名
$tip.removeClass(\'fade top bottom left right in\')
}
,
hasContent: function () {
return this.getTitle() || this.getContent()
}
,
getContent: function () {
var content
, $e = this.$element
, o = this.options
content = $e.attr(\'data-content\')
|| (typeof o.content == \'function\' ? o.content.call($e[0]) : o.content)
return content
}
,
tip: function () {
if (!this.$tip) {
this.$tip = $(this.options.template)
}
return this.$tip
}
,
destroy: function () {
this.hide().$element.off(\'.\' + this.type).removeData(this.type)
}
})
/* POPOVER PLUGIN DEFINITION
* ======================= */
var old = $.fn.popover
$.fn.popover = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data(\'popover\')
, options = typeof option == \'object\' && option
if (!data) $this.data(\'popover\', (data = new Popover(this, options)))
if (typeof option == \'string\') data[option]()
})
}
$.fn.popover.Constructor = Popover
$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: \'right\'
,
trigger: \'hover\'
,
content: \'\'//模板结构比tooltip复杂一点，用于放置更多的内容
,
template: \'<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"></div></div></div>\'
})
/* POPOVER NO CONFLICT
* =================== */
$.fn.popover.noConflict = function () {
$.fn.popover = old
return this
}
}(window.jQuery);