Question

如果我检查official documentation，我可以看到一个名为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插入工具提示”，但类型是布尔值。如何在工具提示中使用复杂的html？

Answer 1

此参数仅指您是否要在工具提示中使用复杂的html。将其设置为true，然后将html命名为标记的title属性。

请参阅此小提琴here - 我已通过data-html="true"标记中的<a>将html属性设置为true，然后仅在html ad hoc中添加作为示例。< / p>

Answer 2

正常情况下，使用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代码没有被转义并且用户可以自己编辑bio，则他们可以注入恶意代码。

Answer 3

避免将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>

通过这种方式，您可以创建复杂的可读html内容，并根据需要激活任意数量的工具提示。

现场演示here on codepen

Answer 4

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演示：

Answer 5

如果要将html输入工具提示，请将“html”选项设置为true。实际的html由选项“title”决定（不应设置链接的title属性）

$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});

Live sample

我可以在Twitter Bootstrap的工具提示中使用复杂的HTML吗？

5 个答案: