在前端开发中，我们经常需要添加工具提示（Tooltip）来提供更多的信息或解释。Twitter Bootstrap 提供了一些方便的工具提示组件，但是它们只支持简单的文本和基本的 HTML 标签。那么，我们能否在 Twitter 工具提示中使用更复杂的 HTML 呢？答案是肯定的。
为什么要使用复杂的 HTML？
有时候，简单的文本和标签可能无法满足我们的需求。比如，我们想要在工具提示中显示一个表格、一个图表或者一个复杂的列表。这时候，我们就需要使用更复杂的 HTML。
如何添加复杂的 HTML 到工具提示中？
首先，我们需要创建一个包含我们想要显示的 HTML 内容的变量。然后，在将其传递给 title 属性之前，我们需要通过 escape 函数对其进行转义，以避免在浏览器中渲染时出现意外的行为。
下面是一个示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
-------------- ------------
----- ---------------- ---------------------------------------------------------------------------------------
-------
------
---- ---------------- ------
----------- ---------
------- ------------- ---------- ------------ --------------------- ----------------
----------------------------------------------------------------------------------------------------------------------------------------------------------
----
---------
------
------- ----------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------------------
--------
---------- -- -
---------------------------------------
---
---------
-------
-------在上面的代码中，我们创建了一个带有一个按钮的页面，并将 data-html 属性设置为 true。这是因为默认情况下，Bootstrap 工具提示组件会自动对文本进行转义，而我们需要展示 HTML 内容。
接着，我们将要显示的表格包裹在 <table> 标签中，并使用 <thead> 和 <tbody> 分别添加表头和表格内容。最后，我们将整个表格作为字符串传递给了 title 属性，并通过 escape 函数进行了转义。
最后，我们通过 jQuery 的 tooltip() 方法来初始化工具提示，并将其应用于所有带有 data-toggle="tooltip" 属性的元素。
总结
在本文中，我们介绍了如何在 Twitter 工具提示中使用复杂的 HTML。虽然这种方法并不是很常见，但它可以帮助我们更好地展示信息，提高用户体验。
值得注意的是，在使用此方法时一定要小心，因为浏览器可能会对某些标签和属性进行过滤或转义，导致意外的行为发生。
参考链接：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10310
