Bootstrap 是一个广泛使用的前端框架，提供了很多有用的功能来构建网站和应用程序。其中之一是工具提示（Tooltip）功能，可以让用户在鼠标悬停在元素上时查看相关信息。然而，在某些情况下，我们可能希望关闭此功能，本文将介绍如何实现。
原理
Bootstrap 工具提示功能通过 JavaScript 实现，它在页面中动态创建了一个包含文本的元素，并且调整了其位置使其出现在正确的位置。为了关闭这个功能，我们需要找到相应的代码并禁用它。
实现方式
方法一：删除 data-toggle 属性
在 Bootstrap 中，工具提示功能是通过 data-toggle="tooltip" 属性来启用的。因此，最简单的方法是删除该属性。例如，如果您要关闭以下按钮的工具提示：
------- ---------- ------------ --------------------- ------------ --------------------
只需将 data-toggle="tooltip" 删除即可：
------- ---------- ------------ ------------ --------------------
请注意，这种方法不会完全删除工具提示的 JavaScript 代码，但它会防止工具提示出现在页面上。
方法二：使用 jQuery
如果您不想修改 HTML 代码，也可以使用 jQuery 来禁用工具提示。Bootstrap 工具提示在页面准备就绪时会自动初始化，因此我们可以在 $(document).ready() 事件中找到工具提示元素并禁用它们。
以下代码片段演示了如何使用 jQuery 关闭所有工具提示：
---------------------------- - ------------------------------------------------ ---
该代码查找具有 data-toggle="tooltip" 属性的所有元素，并调用 .tooltip('dispose') 方法来关闭它们。请注意，在这种情况下，我们仍然需要包含 Bootstrap 的 JavaScript 文件。
方法三：修改全局设置
如果您想在整个站点中禁用工具提示功能，可以通过修改全局设置来实现。在 Bootstrap 中，您可以使用 $.fn.tooltip.Constructor.Default 对象来配置默认选项。例如，要禁用所有工具提示，您可以将 trigger 选项设置为 manual：
---------------------------------------- - ---------
这样一来，在整个站点中都将禁用工具提示功能。当然，您可以根据需要进行其他设置。
结论
Bootstrap 工具提示是一个有用的功能，但有时可能需要将其关闭。上述方法提供了多种选择，您可以根据自己的需求选择最适合您的方法。无论哪种方法，都需要谨慎使用，以确保不会破坏页面的其他功能。
示例代码
--------- ----- ------ ------ ----- ---------------- -------------- --------- --------------- ----- ---------------- ----------------------------------------------------------------------------- ------- ------ ------- ---------- ------------ --------------------- ------------ -------------------- ------- ---------------------------------------------------------------- ------- ----------------------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------------- -------- ---------------------------- - ------------------------------------------------ --- --------- ------- -------
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26162