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 卡片 →