提示冒泡Tooltip

提示冒泡Tooltip

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年6 月8日

Tooltip的意思为工具提示、提示信息、提示框或者是提示文本，在这里我们就称其为提示冒泡，就如生活中的聊天软件里的聊天泡泡框，而这里的提示冒泡主要用于提示内容和标记。而使用提示冒泡Tooltip组件需要注意一下几点：

1. Tooltip提示冒泡组件依赖于 Popper.js ，你必须将popper.min.js 文件放在 bootstrap.js之前调用，或用 bootstrap.bundle.min.js / bootstrap.bundle.js这两个已经包含了 Popper.js 的脚本。
2. 标题（或内容）零长度情况下，Tooltip提示冒泡插件不会显示（生效）。
3. 在隐藏元素上触发Tooltip提示冒泡插件不会起作用（无效行为）。
4. Tooltip提示冒泡插件的.disabled 或 disabled 元素必须放在外层（父层）元素上。
5. 如果从一个跨多行的链接上触发Tooltip提示冒泡插件，提示冒泡将居中，在你的<a>上使用white-space: nowrap; 可避免这种行为（即回归左右对齐）。
6. 必须先隐藏Tooltip提示冒泡插件，然后才能从DOM中删除相应的元素。

Tooltip提示冒泡插件是可以在任何地方启用的，可以是在一段文字上，也可以在按钮上提示冒泡效果。

用法：Tooltip提示冒泡插件是使用data-toggle来进行选择的。

tooltip提示冒泡插件根据需要生成内容和标记，默认情况下我们将它放在触发元素之后。

标记

工具提示框所需要的标记只是一个data 元素和你希望拥有一个tooltip提示冒泡HTML元素上的 title ，tooltip提示冒泡插件的标记很简单，尽管它需要一个位置（默认是 top 顶部指示）。

选项：可以通过数据属性或JavaScript传递选项，如果使用数据属性，请将选项名称附加到data-,如data-animation=””。

Animation 将CSS淡入淡出应用于tooltip提示冒泡。

单个提示冒泡的数据属性：单个提示冒泡的选项可以通过使用data数据属性来替补指定。

当你想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。

用法

工具提示（Tooltip）插件根据需求生成内容和标记，默认情况下是把工具提示（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加工具提示（tooltip）：

1. 通过 data 属性：如需添加一个工具提示（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为工具提示（tooltip）的文本。默认情况下，插件把工具提示（tooltip）设置在顶部。
2. 通过 JavaScript：通过 JavaScript 触发工具提示（tooltip）：

$(‘#identifier’).tooltip(options)

1. 工具提示（Tooltip）插件不像下拉框以及其他插件那样，它不是纯粹的CSS插件。如果使用该插件，你必须使用jQuery激活它（读取JavaScript）。使用下面脚本来启用页面中的所有工具提示（tooltip）

$(function () { $(“[data-toggle=’tooltip’]”).tooltip();});

使用方法可以给任何元素添加 title 属性或 data-original-title 属性，来定义提示的内容。工具提示插件优先使用 title 属性的值作为提示内容，如果没有提供 title 属性或它的值为空，才使用 data-original-title 属性的值作为提示内容。以下两种声明方式的效果相同：

<a href="#" data-toggle="tooltip" title="This is the tooltip">Tooltip Example</a>

<a href="#" data-toggle="tooltip" data-original-title="This is the tooltip">Tooltip Example</a>

下面是鼠标放到<a>标签上的文字链接时出现提示冒泡的代码，见代码截图如下：

更多有关提示冒泡属性、功能，在这次的小结里就不多说了，可自行查阅资料去了解，

提示冒泡的方向：tooltip提示冒泡可以使用四个方向：顶部对齐、右对齐、底部对齐、左对齐。如下面的效果图图一所示，把鼠标放到文字链接上会出现提示冒泡，冒泡可设置方向，如下面效果图图一、图二