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: ' ' }) /* 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"> <link rel="stylesheet" href="http://files.cnblogs.com/rubylouvre/bootstrap.css"/> <script src="http://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-tooltip.js"></script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-popover.js"></script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-button.js"></script> <script > $(function () { var log = function(s){ window.console && console.log(s) } $('.well a').popover() }) </script> <script> </script> </head> <body> <br/> <br/> <h3>by 司徒正美</h3> <br/> <div class="well"> <a href="#" class="btn btn-danger" rel="popover" data-content="他来自山东，是一名残疾人，因思想独立、指谪政弊而被政府迫害。地方政府和当权政要派专人看管他，调拨专款作为对他的看管费用，他每天都活在别人的监视和囚禁中，其遭遇只能用令人发指来形容。历尽万难，他终于成功逃离了当地，在外国使节的帮助和护送下去到了国外。他，就是孙膑。" data-original-title="他是谁">鼠标经过弹出提示</a> </div> </body> </html> 运行代码