Popover 弹出框

基础用法

Popover 的属性与 Tooltip 很类似,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解释。

显示代码

嵌套信息

可以在 Popover 中嵌套多种类型信息,以下为嵌套表格的例子。

显示代码

嵌套操作

当然,你还可以嵌套操作,这相比 Dialog 更为轻量:

显示代码

参数

你可以通过修改$.fn.popover.defaults来修改全局默认配置,也可以在初始化时传入指定配置$(#id).popover({xx: xx})

参数 说明 类型 可选值 默认值
trigger 触发方式 String click/focus/hover/manual 'click'
title 标题 String - -
content 显示的内容,支持html String - -
width 宽度 String - 最小宽度 150px
placement 出现的位置 String top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end 'bottom'
disabled Tooltip 是否可用 Boolean - false
offset 出现位置的偏移量 Number - 0
visibleArrow 是否显示 Tooltip 箭头, Boolean - true
openDelay 延迟出现,单位毫秒 Number - 0
popoverClass 为 Popover 添加类名 String - -
afterEnter 显示后执行 Function - -
afterAfter 隐藏后执行 Function - -

方法

你可以通过调用$(el).popover('xxx')来调用已被初始化过的元素的 Popover 方法。

方法 说明 举例
set 重新设置 Popover 参数,若传入字符串则当做content处理 $(el).popover('set', {xx: xx})
show 显示加载特效 $(el).popover('show')
hide 隐藏加载特效 $(el).popover('hide')