popover插件

HTML代码

<button type="button" class="btn btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容">左侧的 Popover</button>

CSS代码

.popover {position: absolute;top: 0;left: 0;z-index: 1060;display: none;max-width: 276px;padding: 1px;font-size: 14px;font-weight: normal;line-height: 1.42857143;text-align: left;white-space: normal;background-color: #fff;-webkit-background-clip: padding-box;background-clip: padding-box;border: 1px solid #ccc;border: 1px solid rgba(0, 0, 0, .2);border-radius: 6px;-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
.popover.top {margin-top: -10px}
.popover.right {margin-left: 10px}
.popover.bottom {margin-top: 10px}
.popover.left {margin-left: -10px}
.popover-title {padding: 8px 14px;margin: 0;font-size: 14px;background-color: #f7f7f7;border-bottom: 1px solid #ebebeb;border-radius: 5px 5px 0 0}
.popover-content {padding: 9px 14px}
.popover > .arrow,.popover > .arrow:after {position: absolute;display: block;width: 0;height: 0;border-color: transparent;border-style: solid}
.popover > .arrow {border-width: 11px}
.popover > .arrow:after {content: "";border-width: 10px}
.popover.top > .arrow {bottom: -11px;left: 50%;margin-left: -11px;border-top-color: #999;border-top-color: rgba(0, 0, 0, .25);border-bottom-width: 0}
.popover.top > .arrow:after {bottom: 1px;margin-left: -10px;content: " ";border-top-color: #fff;border-bottom-width: 0}
.popover.right > .arrow {top: 50%;left: -11px;margin-top: -11px;border-right-color: #999;border-right-color: rgba(0, 0, 0, .25);border-left-width: 0}
.popover.right > .arrow:after {bottom: -10px;left: 1px;content: " ";border-right-color: #fff;border-left-width: 0}
.popover.bottom > .arrow {top: -11px;left: 50%;margin-left: -11px;border-top-width: 0;border-bottom-color: #999;border-bottom-color: rgba(0, 0, 0, .25)}
.popover.bottom > .arrow:after {top: 1px;margin-left: -10px;content: " ";border-top-width: 0;border-bottom-color: #fff}
.popover.left > .arrow {top: 50%;right: -11px;margin-top: -11px;border-right-width: 0;border-left-color: #999;border-left-color: rgba(0, 0, 0, .25)}
.popover.left > .arrow:after {right: 1px;bottom: -10px;content: " ";border-right-width: 0;border-left-color: #fff}

JS代码

依赖jquery 和 h-ui.js

用法很简单，只需要在标签添加 data-toggle="popover" title="提示标题" data-content="提示内容" data-placement="left|top|bottom|right" 这两个属性即可，然后通过$(function () { $("[data-toggle='popover']").popover()}); 激活popover工具。

调用参数

选项名称	类型/默认值	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'

方法

方法	描述	实例
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')

事件

事件	描述	实例
show.bs.popover	当调用 show 实例方法时立即触发该事件。	$('#mypopover').on('show.bs.popover', function () { // 执行一些动作... })
shown.bs.popover	当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。	$('#mypopover').on('shown.bs.popover', function () { // 执行一些动作... })
hide.bs.popover	当调用 hide 实例方法时立即触发该事件。	$('#mypopover').on('hide.bs.popover', function () { // 执行一些动作... })
hidden.bs.popover	当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。	$('#mypopover').on('hidden.bs.popover', function () { // 执行一些动作... })