静态类型

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

不带箭头指示

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

动态演示

在不同方向弹出

指定html元素作为弹出内容

打开弹出框

Popover top

Lorem ipsum dolor. Nisi, ad, quisquam! Eum, excepturi, placeat.
Lorem ipsum dolor. Explicabo, nobis, nesciunt! Sequi, doloribus, natus.
Lorem ipsum dolor. Ipsum, suscipit, quibusdam? Minus, tenetur, neque.

用法

通过JavaScript启用弹出框:

$('#example').popover(options)

使用要点

选项

可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-之后,例如data-animation=""

名称 类型 默认值 描述
animation boolean true 是否应用淡入淡出动画。
html boolean false 是否允许内容中包含html。
placement string | function 'right' top | bottom | left | right | auto.
显示位置
selector string false 当需要给动态的DOM元素应用工具提示时,需要手动制定选择器。
trigger string 'click' click | hover | focus | manual,决定交互方式。
title string | function '' 标题
content string | function '' 内容
delay number | object 0

是否延迟展示。

delay: { show: 500, hide: 100 }

container string | false false

决定相对位置的父级容器。

tipClass string 为动态生成的div.popover标签添加额外的CSS CLASS。
tipId string 为动态生成的div.popover标签设置一个id属性。

为单个弹出框应用data属性

对单个弹出框可以通过data属性单独指定选项,如上所示。

方法

$('#element').popover(options)

为一组元素初始化弹出框。

.popover('show')

显示弹出框。

$('#element').popover('show');

.popover('hide')

隐藏弹出框。

$('#element').popover('hide');

.popover('toggle')

展示或隐藏弹出框。

$('#element').popover('toggle');

.popover('destroy')

隐藏并销毁弹出框。

$('#element').popover('destroy');

事件

事件类型 描述
show.zui.popover show 方法被调用之后,此事件将被立即触发。
shown.zui.popover 当弹出框展示到用户面前之后(同时CSS过渡效果执行完之后)此事件被触发。
hide.zui.popover hide 方法被调用之后,此事件被触发。
hidden.zui.popover 当弹出框被隐藏之后(同时CSS过渡效果执行完之后),此事件被触发。