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	显示和隐藏时的延迟时间(以毫秒计) 如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。如果是一个对象，其结构就是: `delay: { show: 500, hide: 100 }`

不过最近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);

<!DOCTYPE html>
<html>
    <head>
        <title>bootstrap学习 by 司徒正美</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">