我可以在Twitter Bootstrap的工具提示中使用复杂的HTML吗？
如果我检查官方文档 ，我可以看到一个名为HTML的属性：
Name | Type | default | Description ---------------------------------------------------------------------------- html | boolean | false | Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. 它说，“插入HTML到工具提示”，但types是布尔值。 如何在Tooltip中使用复杂的html？
这个参数就是关于你是否要在工具提示中使用复杂的html。 将其设置为true ，然后将html打到标记的title属性中。
在这里看到这个小提琴 – 我已经通过<a>标签中的data-html="true"将html属性设置为true，然后在html ad hoc中作为示例添加。
正常情况下，使用data-original-title ：
HTML：
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
使用Javascript：
$("[rel=tooltip]").tooltip({html:true});
html参数指定如何将工具提示文本转换为DOM元素。 默认情况下，Html代码在工具提示中被转义以防止XSS攻击。 假设您在您的网站上显示用户名，并在工具提示中显示一个小生物。 如果html代码没有被转义，用户可以自己编辑生物，他们可以注入恶意代码。
html数据属性的确如它在文档中所做的那样。 试试这个小例子，没有javascript nessecary（为了澄清而分解成几行）：
<span rel="tooltip" data-toggle="tooltip" data-html="true" data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>" > hover over me to see HTML </span>
jsfiddle演示 – > bootstrap 2.x | bootstrap 3.x
避免将html插入到数据标题中的另一个解决scheme是使用工具提示HTML内容创build独立的div，并在创build工具提示时引用此div：
<!-- Tooltip link --> <p><span class="tip" data-tip="my-tip">Hello world</span></p> <!-- Tooltip content --> <div id="my-tip" class="tip-content hidden"> <h2>Tip title</h2> <p>This is my tip content</p> </div> <script type="text/javascript"> $(document).ready(function () { // Tooltips $('.tip').each(function () { $(this).tooltip( { html: true, title: $('#' + $(this).data('tip')).html() }); }); }); </script>
这样，您可以创build复杂的可读html内容，并根据需要激活尽可能多的工具提示。
在codepen现场演示
设置“html”选项为true，如果你想有HTML到工具提示。 实际的html由选项“title”决定（不应该设置链接的title属性）
$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});
现场采样
