Bootstrap 是一种非常流行的前端框架，它提供了许多实用工具来帮助我们开发漂亮且交互式的 Web 应用程序。其中之一是工具提示，可以在用户将鼠标悬停在某些元素上时显示关于该元素的信息。
但是，在默认情况下，Bootstrap 工具提示会在鼠标移开元素后自动隐藏。这对于某些应用程序可能不太理想。在本文中，我们将学习如何使 Bootstrap 工具提示保持可见直到链接被单击。
实现方法
为了实现这个功能，我们需要使用一些 JavaScript 代码来控制工具提示的显示和隐藏。
首先，我们需要一个触发器元素，例如一个按钮或链接，当用户单击它时，工具提示应该保持可见。
其次，我们需要一些 JavaScript 代码来监听触发器元素的单击事件，并禁用工具提示的自动隐藏行为。
最后，我们需要在用户单击触发器元素时手动隐藏工具提示。
下面是一个示例代码片段，实现了此功能：
------- -------------- ---------- ------------ --------------------- ------------ ------- ---------------
--------
--- -------- - -------------------------------------
--- --------- - --- ----------------------------
---------------------------------- -------- -- -
-- ------- ------- ---- ----
-------------------------- - ------
------------------------ - ---------
-- ---- -------
-----------------
-- ---- ------- -- ---- -----
---------------------------------- -------- -- -
-----------------
-- - ----- ---- ---
---
---------在这个例子中，我们创建了一个带有工具提示的按钮，并添加了一个单击事件监听器。当按钮被单击时，我们将禁用工具提示的自动隐藏行为，并手动显示它。
接着，我们添加了另一个单击事件监听器，以便在用户下一次单击按钮时手动隐藏工具提示。请注意，在第二个事件监听器中使用了 {once: true} 选项，使该事件只会触发一次。
总结
在本文中，我们学习了如何使 Bootstrap 工具提示保持可见直到链接被单击。需要注意的是，这种方法只适用于单击触发器元素后才显示工具提示的情况。如果您需要在悬停时显示工具提示，并且希望在鼠标移开元素后保持可见，请考虑使用其他解决方案。
此外，本文示例代码仅供参考。实际应用程序可能需要根据特定需求进行调整和修改。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27716