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 () {
  // 执行一些动作...
})