php show.bs.popover,POP提示 (Popover)

POP提示 (Popover)

将Bootstrap插件(如同iOS的渐变模态提示)添加到网站上的任何元素上，这是演示实例和设计文档。

概览

使用popover提示框插件时需要注意的事项：

popover提示框组件依赖 Popper.js 进行定位，在必须引入 popper.min.js 在bootstrap.js脚本之前，或者使用bootstrap.bundle.min.js / bootstrap.bundle.js(这两个脚本中已经包含了Popper.js可以直接运行弹出提示框)。

popover提示框组件依赖于 tooltips提示冒泡插件 提供状态提示框。

如果你要自行编译JS，请 包括 util.js脚本文件。

由于性能原因，popover提示框组件是可选的，所以 你必须自己将它们初始化才能启动生效。

零长度的 title 和 content 不会显示为一个弹出提示框。

指定 container: 'body'定义，以避免在更复杂的组件(如输入框组、按钮组等)中产生呈现问题。

在隐藏元素上触发弹出提示框是无效(不起作用)的。

.disabled 或 disabled 元素的弹出提示框触发点击按钮，必须在在外层父元素上。

如果从一个跨多行的链接上触发提示冒泡，提示冒泡将居中。在上使用white-space: nowrap;可以避免这种情况。

必须先隐藏弹出提示框，然后才能从DOM中删除相应的元素(以完成弹出关闭完整行为)。

下面让我们通过一系列的实例来了解其运作机理。

示例：在任意位置启用弹出窗口

在页面上初始化所有弹出提示框的一种方法是通过它们的 data-toggle 属性来选择它们：

$(function () {

$('[data-toggle="popover"]').popover()

})

示例：使用 container 容器选项

当你在一个父元素上有一些样式与提示框产生样式干扰，你可以指定一个自定义的container容器，这样提示框的HTML将出现在这个元素内部了。

$(function () {

$('.example-popover').popover({

container: 'body'

})

})

现场演示

点击体验 popover提示框效果

点击体验 popover提示框效果

四个方向

有四种选择：上、右、下、左对齐。

Popover on top

Popover on right

Popover on bottom

Popover on left

Popover on top

Popover on right

Popover on bottom

Popover on left

在下次点击时收回

使用focus触发器，达到提示必须在用户下一次点击时才能收回(移除)提示事件。

下一步点击所需要的标记

为正确处理(兼容)跨浏览器和跨平台行为，你必须使用则必须使用 标签，而 不是标签，你还必须包括一个 tabindex 属性。

Dismissible popover

$('.popover-dismiss').popover({

trigger: 'focus'

})

禁用的元素

具有 disabled 属性的元素不是交互式的这意味着用户不能悬停或点击它们来触发弹出窗口(或工具提示)。 作为一种解决方法，您需要从包装器

或 中触发弹出窗口，并覆盖disabled元素上的指针事件。

对于禁用的弹出式触发器，您也可能更喜欢 data-trigger="hover" ，以便弹出窗口显示为用户的直接视觉反馈，因为他们可能不希望单击禁用的元素。

Disabled button

Disabled button

用法

利用JavaScript启动提示泡:

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

选项

可通过数据属性或JavaScript传递选项参数。对于数据属性，请将选项名称附加到data-上，如 data-animation=""。

名称

Type类型

默认值

描述

animation

boolean

true

将CSS淡入淡出转换应用于popover提示框。

container

string | element | false

false

向一个特定元素追加提示框，如`container: 'body'`。这个选项候特别有用，因为它允许你将弹出提示定位在触发元素附近的内容中--这将防止在窗口调整大小的时候，提示框飘到远离(撑出)触发元素的位置。

content

string | element | function

''

如果 `data-content` 属性不存在，提供默认的content值。

如果提供了一个函数，调用这个函数时，函数的`this`引用被设置为附加提示框的元素。

delay

number | object

0

延迟显示和隐藏弹出(ms) - 不适用于手动触发类型。

如果向这个选项提供一个数字值，显示和隐藏都会应用这个延迟。

Object对象结构是: `delay: { "show": 500, "hide": 100 }`

html

boolean

false

向提示框插入HTML。如果值为false，将使用jQuery的text方法向DOM插入内容。如果你担心跨站脚本攻击的话，请使用`text`。

placement

string | function

'right'

如何定位提示框：auto | top | bottom | left | right。

如果指定了"auto"，它会动态地调整提示框的位置。举个例子，如果placement是"auto left"，提示框将尽可能地显示在左侧，否则显示在右侧。

如果用一个函数来决定placement，会调用提示框的DOM节点作为第一个参数，然后触发元素的DOM节点是第二个参数。`this`将被设置为提示框的实例。

selector

string | false

false

如果提供了一个选择器，提示框将被委派给指定的目标。在实践中，它让动态添加的HTML内容也能附加提示框。请参阅这里文档 以及 一个翔实的示例

template

string

'

在创建提示框时使用基本HTML。

动态提示框的 `title` 值将被注入到 `.popover-header` 中。

动态提示框的 `content` 值将被注入到 `.popover-body` 中。

`.arrow` 将变成提示框的箭头。

最外层的包裹元素必须拥有 `.popover` class样式定义

title

string | element | function

''

如果 `title` 属性不存在，提供默认的title值。

如果提供了一个函数，调用这个函数时，函数的 `this` 引用被设置为附加提示框的元素。

trigger

string

'click'

如何触发提示框 - click | hover | focus | manual。你可以传递多个触发器，用空格隔开它们。但是`manual`不能与别的触发器结合使用。

offset

number | string

0

提示框相对于目标的偏移，欲知更多请查询 偏移属性文档

fallbackPlacement

string | array

'flip'

指定动态提示框在回调时使用哪个位置，有关更多信息请参阅 Popper.js 的 行为属性文档

boundary

string | element

'scrollParent'

Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.

单个popovers的数据属性

如上所述，可以通过使用数据属性来指定各个提示框的选项。

方法

异步传输和转换

所有API都支持异步传输和轮换。一旦转换事件发生(开始)，直到事件结束之前不会结束。另外，在过渡组件上的方法将被忽略。

请参阅我们的API文档了解更多。

$().popover(options)

元素集合的淡出提示框初始化。

.popover('show')

显示一个元素的提示框，在弹出实际显示之前返回给调用者(即在shown.bs.popover 事件发生前)，这被认为是弹出提示框的手动触发，标题和内容为弹出提示框不显示。

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

.popover('hide')

隐藏元素的提示框，在弹出提示框实际被隐藏之前返回给调用者(即在 hidden.bs.popover 事件发生前)，这被认为是弹出提示框的手动触发。

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

.popover('toggle')

切换元素的提示框，在popver提示框实际显示或隐藏之前返给调用者，即在 shown.bs.popover 或 hidden.bs.popover 事件发生前，这被认为是弹出提示框的手手动触发触发。

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

.popover('dispose')

隐藏和销毁一个元素的提示框，使用委托授权 (使用 the selector option创建)的提示框不能在后代触发元素不被单独销毁。

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

.popover('enable')

給一个元素的弹出提示框显示的功能。 默认情况下是启用的

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

.popover('disable')

删除要显示元素的提示框，只有在重新启用后，才能显示出提示框。

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

.popover('toggleEnabled')

切换提示窗口的显示或隐藏功能。

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

.popover('update')

更新元素的提示框的位置。

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

事件

Event事件类型

描述

show.bs.popover

当调用`show`实例方法时，此事件立即触发。

shown.bs.popover

当提示框显示时，会触发此事件(待CSS转换过渡完成)。

hide.bs.popover

当调用 `hide` 实例方法时，此事件立即触发。

hidden.bs.popover

当提示框隐藏后，会触发此事件(待CSS转换过渡完成)。

inserted.bs.popover

当提示框对用户来说最终完成隐藏时(需要等待CSS转换过渡完成)，会触发该事件。 当事件弹出模板被添加到DOM时，`show.bs.popover`事件被触发。

$('#myPopover').on('hidden.bs.popover', function () {

// do something…

})