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

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 插入工具提示”，但类型是布尔值。如何在 Tooltip 中使用复杂的 html？

Answer 1

这个参数只是关于你是否要在工具提示中使用复杂的html。将其设置为true，然后将html打到标签的title属性中。

查看这个小提琴here - 我通过<a> 标记中的data-html="true" 将html 属性设置为true，然后作为示例添加到html ad hoc 中。

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 放入工具提示中，请将“html”选项设置为 true。实际 html 由选项“title”确定（不应设置链接的 title 属性）

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

Live sample

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

• Bootstrap 2.x
• Bootstrap 3.x

Answer 5

另一种避免将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 6

从 bootstrap 5 开始，您可以在配置时将工具提示的内容指定为 html DOM 节点。示例配置...

// setup tools tips trigger
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new Tooltip(tooltipTriggerEl, {
           html: true // <- this should do the trick!
     })
});