4.19、Bootstrap V4自学之路-----内容---提示冒泡

我一直没有调试出来，包裹引入tether.min.js仍然无法出发效果。

mark着，回头再看。先熟悉文档。

概述

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

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

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

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

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

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

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

示例：在任何地方启用提示冒泡

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

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

示例

我出不来效果。

    静态演示

哎。

    互动演示

尴尬。

用法

提示冒泡插件根据需要生成内容和标记，默认将提示冒泡放在触发元素后面。

利用JavaScript触发提示冒泡：

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

    标记

如果你想要一个提示冒泡，只有HTML元素中的data属性和title属性是必不可少的标记。提示冒泡生成的标记很简单，虽然它确实需要一个位置（默认情况下被插件设置为顶部）。

<br>
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

话虽如此，但不出效果。

选项

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

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

方法

$().tooltip(options)

对一个元素集附加一个提示冒泡处理程序。

 .tooltip(‘show’)

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

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

.tooltip(‘hide’)

隐藏一个元素的提示冒泡。在提示冒泡真正隐藏之前返回给调用者（也就是，在hidden.bs.tooltip事件发生之前）。这被视为提示冒泡的一次“人为”触发。

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

.tooltip(‘toggle’)

切换一个元素的提示冒泡。在提示冒泡真正显示或隐藏之前返回给调用者（也就是，在 shown.bs.tooltip或hidden.bs.tooltip事件发生之前）。这被视为提示冒泡的一次“人为”触发。

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

.tooltip(‘destroy’)

隐藏并销毁一个元素的提示冒泡。使用委派的提示冒泡（创建时使用了selector选项）不能在后代触发元素上被单独销毁。

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

事件

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

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

吐血！！为什么不触发呢？