Popover


气泡式弹出层组件,本组件无需创建 HTML 结构。

插件根据元素在窗口中的位置自动判断弹出层显示位置,目前没有设置位置的选项。

使用演示

点击显示

<button class="am-btn am-btn-primary" data-am-popover="{content: '鄙是点击显示的 Popover'}">点击显示 Popover</button>

Hover/Focus 显示

Tooltip 效果。

<button class="am-btn am-btn-success"
        data-am-popover="{content: '鄙是点击 Hover 显示的 Popover', trigger: 'hover focus'}">
  Hover 显示 Popover
</button>

使用方式

通过 Data API

在元素上添加 data-am-popover 属性并设置相关参数。上面的演示都是通过 Data API 实现的。

<button data-am-popover="{content: '想显示啥', trigger: 'hover'}">Popover
</button>

通过 JS

通过 $().popover(options) 方式添加元素 Popover 交互。

<button class="am-btn am-btn-danger" id="my-popover">Popover via JS</button>
$(function() {
  $('#my-popover').popover({
    content: 'Popover via JavaScript'
  })
});

参数说明

参数 类型 描述
content string Popover 显示的内容
trigger string 交互方式,click|hover|focus,默认为 click

方法

自定义事件

事件定义在触发 Popover 交互的元素上。

事件名称 描述
open.popover.amui open 方法被调用是立即触发
close.popover.amui close 方法被调用是立即触发