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') |
← Tooltip 文字提示 Card 卡片 →