Bootstrap - 工具提示：初学者指南

你好，未来的网页开发者们！今天，我们将深入了解Bootstrap工具提示的奇妙世界。作为你友好邻邦的计算机老师，我将一步步引导你完成这次旅行。如果你之前从未编写过一行代码，也不用担心——我们将从最基础的内容开始，逐步深入学习。那么，拿起一杯咖啡（或者你最喜欢的饮料），让我们开始吧！

工具提示是什么？

在我们深入了解之前，先来了解一下工具提示是什么。你是否曾经将鼠标悬停在网页上的图标或文本上，然后看到一个带有额外信息的小弹出窗口？那就是工具提示！它们就像提供额外上下文或解释的小助手，而不会让你的主要内容变得杂乱。

启用工具提示

现在，让我们动手写一些代码。我们要做的第一件事是在Bootstrap中启用工具提示。别担心，这比听起来要简单！

<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

这个小脚本告诉Bootstrap：“嘿，我们想在这个页面上使用工具提示！”这就好比在黑暗的房间里打开开关之前。

创建工具提示

让我们创建第一个工具提示。只需给HTML元素添加几个属性即可：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="我是一个工具提示！">
将鼠标悬停在我身上
</button>

这里发生了什么：

• 我们使用Bootstrap的btn和btn-secondary类创建了一个按钮。
• data-toggle="tooltip"告诉Bootstrap这个元素应该有一个工具提示。
• title="我是一个工具提示！"是我们工具提示中将要显示的文本。

当你将鼠标悬停在这个按钮上时，你会看到“我是一个工具提示！”弹出。是不是很神奇？

链接上的工具提示

工具提示不仅适用于按钮。让我们给链接添加一个：

<a href="#" data-toggle="tooltip" title="点击我前往某个地方！">将鼠标悬停这个链接上</a>

这和我们的按钮示例工作方式相同。当你将鼠标悬停在链接上时，你会看到工具提示消息。

自定义工具提示

现在，让我们来点更高级的。我们可以自定义工具提示，使它们更有趣：

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true"
title="<em>工具提示</em> <u>带</u> <b>HTML</b>">
悬停以显示HTML工具提示
</button>

在这个示例中，我们添加了data-html="true"以允许在工具提示中使用HTML。现在我们可以使用<em>、<u>和<b>这样的标签来设置工具提示文本的样式。

工具提示的位置

我们可以控制工具提示相对于我们的元素出现的位置。让我们尝试所有四个位置：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="顶部工具提示">
顶部工具提示
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="右侧工具提示">
右侧工具提示
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="底部工具提示">
底部工具提示
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="左侧工具提示">
左侧工具提示
</button>

data-placement属性告诉Bootstrap工具提示应该放在哪里。这就好比告诉你的朋友在拍照时应该站在哪里！

带有自定义HTML的工具提示

记得我们之前如何在工具提示中启用HTML吗？让我们更进一步：

<button type="button" class="btn btn-danger" data-toggle="tooltip" data-html="true"
title="<h3>自定义标题</h3><p>这是一个段落。</p><img src='smiley.gif' alt='笑脸图标'>">
悬停以获得惊喜！
</button>

这个工具提示包含了一个标题、一个段落，甚至还有一张图片！就像是在工具提示里的一个小型网页。

标记

有时，你可能想要对你的工具提示结构有更多的控制。这时自定义标记就派上用场了：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' title="自定义工具提示">
自定义工具提示标记
</button>

这个示例使用了data-template属性来定义我们的工具提示的定制结构。这就好比自己建造房子而不是买现成的！

禁用元素上的工具提示

通常，禁用的元素不会触发用户交互。但用一个小技巧，我们就可以让工具提示在它们上面工作：

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="禁用工具提示">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>禁用按钮</button>
</span>

我们将禁用按钮包装在一个可以接收焦点的span中。这就好比给够不到顶层货架的人一个助手！

选项

最后，让我们看看一些我们可以用来进一步定制工具提示的选项：

选项	类型	默认值	描述
animation	boolean	true	应用CSS淡入淡出过渡到工具提示
container	string | false	false	将工具提示附加到特定的元素
delay	number | object	0	延迟显示和隐藏工具提示（毫秒）
html	boolean	false	允许工具提示中使用HTML
placement	string | function	'top'	如何定位工具提示
selector	string	false	如果提供了选择器，工具提示对象将委派给指定的目标
template	string	<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>	创建工具提示时使用的基HTML
title	string | element | function	''	如果title属性不存在，则使用默认的标题值
trigger	string	'hover focus'	触发工具提示的方式 - click | hover | focus | manual

你可以在初始化工具提示时使用这些选项：

$('#example').tooltip({
animation: false,
delay: { "show": 500, "hide": 100 },
placement: 'right'
});

这段代码关闭了淡入淡出动画，添加了延迟，并将工具提示放在元素的右侧。

就这样！你已经迈出了进入Bootstrap工具提示世界的第一步。记住，掌握这个（以及任何编码概念）的关键是练习。尝试创建一个网页并添加不同类型的工具提示。尝试不同的选项，看看你能创造出什么。

在你意识到之前，你将成为工具提示大师，你的网页将变得信息丰富且交互性强！快乐编码，别忘了在过程中享受乐趣！

Credits: Image by storyset