Javascript 我可以在 Twitter Bootstrap 的工具提示中使用复杂的 HTML 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13704789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I use complex HTML with Twitter Bootstrap's Tooltip?
提问by sergserg
If I check official documentation, I can see a property called 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.
It says, "insert html into the tooltip", but the type is boolean. How can I use complex html inside a Tooltip?
它说，“将 html 插入工具提示”，但类型是布尔值。如何在工具提示中使用复杂的 html？
回答by George Wilson
This parameter is just about whether you are going to use complex html into the tooltip. Set it to trueand then hit the html into the titleattribute of the tag.
这个参数只是关于你是否要在工具提示中使用复杂的 html。将其设置为true然后将 html 打入title标签的属性中。
See this fiddle here- I've set the html attribute to true through the data-html="true"in the <a>tag and then just added in the html ad hoc as an example.
在这里看到这个小提琴- 我已经通过标签data-html="true"中的将 html 属性设置为 true <a>，然后作为示例添加到 html ad hoc 中。
回答by Matt Zeunert
Just as normal, using data-original-title:
和往常一样，使用data-original-title：
Html:
网址：
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
Javascript:
Javascript：
$("[rel=tooltip]").tooltip({html:true});
The html parameter specifies how the tooltip text should be turned into DOM elements. By default Html code is escaped in tooltips to prevent XSS attacks. Say you display a username on your site and you show a small bio in a tooltip. If the html code isn't escaped and the user can edit the bio themselves they could inject malicious code.
html 参数指定工具提示文本应如何转换为 DOM 元素。默认情况下，Html 代码会在工具提示中转义以防止 XSS 攻击。假设您在网站上显示用户名，并在工具提示中显示一个小简介。如果 html 代码没有被转义并且用户可以自己编辑生物，他们可能会注入恶意代码。
回答by migli
Another solution to avoid inserting html into data-titleis to create independant div with tooltip html content, and refer to this div when creating your tooltip :
避免将 html 插入data-title 的另一种解决方案是使用工具提示 html 内容创建独立的 div，并在创建工具提示时参考此 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>
This way you can create complex readable html content, and activate as many tooltips as you want.
通过这种方式，您可以创建复杂的可读 html 内容，并根据需要激活尽可能多的工具提示。
live demo here on codepen
在 codepen 上进行现场演示
回答by davidkonrad
The htmldata attribute does exactly what it says it does in the docs. Try this little example, no JavaScript necessary (broken into lines for clarification):
该html数据属性不正是它说，它在文档中。试试这个小例子，不需要 JavaScript（为了澄清，分成几行）：
<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 demos:
JSFiddle 演示：
回答by Andriy F.
set "html" option to true if you want to have html into tooltip. Actual html is determined by option "title" (link's title attribute shouldn't be set)
如果要将 html 放入工具提示，请将“html”选项设置为 true。实际的 html 由选项“title”决定（不应设置链接的标题属性）
$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});
