4.20、Bootstrap V4自学之路-----内容---提示框

我预计要歇菜，mark！

概述

在使用提示框插件的时候你需要知道这些：

• 提示框依赖第三方库Tether实现定位。你必须在bootstrap.js之前调用 tether.min.js，才能使提示框起作用。

• 提示框需要依赖提示冒泡插件。

• 出于性能的原因，提示框是选择性加入的，所以你必须自己初始化它们。

• 标题零长度的提示框不会显示出来。

• 指定container: 'body'以避免复杂组件（比如说输入框组，按钮组，等等）中的渲染问题。

• 在隐藏的元素上触发的提示框不会起作用。

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

示例：在任何地方启用提示框

在网页上初始化所有的提示框的一个途径是用data-toggle属性选中它们：

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

示例：使用container选项

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

$(function () {
   $('.example-popover').popover({
        container: 'body'   
   }) 
})

静态提示框

歇菜。。。

现场演示

<button type="button" class="btn btn-lg btn-danger bd-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

歇菜，出不来呀。。。

四个方向

例子是这个例子，但是我怀疑还是JS引入的不对。

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

    在下一次点击时撤回

使用focus触发器，会在用户下一次点击时抹除提示框。

为dismiss-on-next-click明确标记

为了适当的跨浏览器和跨平台表现，你必须使用<a>标记。不能是<button>标记，而且<a>还必须包含一个tabindex属性。

$('.popover-dismiss').popover({
   trigger: 'focus' 
})

用法

利用JavaScript启用提示框：

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

选项

可以利用data属性或者JavaScript传递选项。如果用data属性，请把选项名追加到data-后面，比如说写成data-animation=""。

$().popover(options) 为一个元素集合初始化提示框。

.popover('show') 显示一个元素的提示框。**在提示框真正显示之前返回给调用者**（也就是，在`shown.bs.popover`事件发生之前）。这被视为提示冒泡的一次“人为”触发。零长度标题零长度内容的提示框不会显示。

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

.popover('hide') 隐藏一个元素的提示框。

**在提示框真正隐藏之前返回给调用者**（也就是，在`hidden.bs.popover`事件发生之前）。这被视为提示框的一次“人为”触发。 Copy

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

  .popover('toggle') 切换一个元素的提示框。

**在提示框真正显示或隐藏之前返回给调用者**（也就是，在 `shown.bs.popover`或`hidden.bs.popover`事件发生之前）。这被视为提示框的一次“人为”触发。 Copy

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

  .popover('destroy') 隐藏并销毁一个元素的提示框。

使用委派的提示框（创建时使用了[`selector`选项](#options)）不能在后代触发元素上被单独销毁。 Copy

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

事件

名称	类型	默认值	描述
animation	boolean	true	对提示框应用一个CSS褪色过渡
container	string | false	false	向一个特定元素追加提示框。示例：container: 'body'。这个选项在某些时候特别有用，比如说它允许你在文档流中在触发元素附近定位提示框--这将防止在窗口调整大小的时候，提示框飘到远离触发元素的位置。
content	string | function	''	如果data-content属性不存在，提供默认的content值。 如果提供了一个函数，调用这个函数时，函数的this引用被设置为附加提示框的元素。
delay	number | object	0	延迟显示或延迟隐藏提示框（以毫秒计）——它不会应用到人为触发类型。 如果向这个选项提供一个数字，显示和隐藏都会应用这个延迟。 对象结构是delay: { "show": 500, "hide": 100 }
html	boolean	false	向提示框插入HTML。如果值为false，将使用jQuery的text方法向DOM插入内容。如果你担心跨站脚本攻击的话，请使用text。
placement	string | function	'right'	如何定位提示框：`top`、 `bottom`、`left`、`right`、`auto`。 如果指定了`auto`，它会动态地调整提示框的位置。举个例子，如果placement是`auto left`，提示框将尽可能地显示在左侧，否则显示在右侧。 如果用一个函数来决定placement，会调用提示框的DOM节点作为第一个参数，然后触发元素的DOM节点是第二个参数。this的上下文设置为提示框的实例。
selector	string	false	如果提供了一个选择器，提示框将被委派给指定的目标。在实践中，它让动态添加的HTML内容也能附加提示框。看这里和一个翔实的例子。
template	string	'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'	在创建提示框时使用HTML。 提示框的title将注入到.popover-title里面。 提示框的content将注入到.popover-content里面。 .popover-arrow将变成提示框的箭头 最外层的包裹元素必须拥有.popover类。
title	string | function	''	如果title属性不存在，提供默认的title值。 如果提供了一个函数，调用这个函数时，函数的this引用被设置为附加提示框的元素。
trigger	string	'click'	如何触发提示框——`click`、`hover`、`focus`、`manual`。你可以传递多个触发器，用空格隔开它们。但是`manual`不能用别的触发器结合使用。
constraints	Array	'hover focus'	一个约束数组，传递给Tether。欲知更多请查询Tether的约束文档
offsets	string	'0 0'	提示框相对于目标的偏移，欲知更多请查询Tether的偏移文档。

事件类型	描述
show.bs.popover	当调用show实例方法时，会立即触发该事件。
shown.bs.popover	当提示框对用户来说可见时（需要等待CSS过渡完成），会触发该事件。
hide.bs.popover	当调用hide实例方法时，会立即触发该事件。
hidden.bs.popover	当提示框对用户来说终于完成隐藏时（需要等待CSS过渡完成），会触发该事件。

$('#myPopover').on('hidden.bs.popover', function () {
   // do something… 
})