149

如果我查看官方文档，我可以看到一个名为 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？

4

6 回答 6

272

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

在此处查看此小提琴-我已通过标签data-html="true"中的 html 属性将 html 属性设置为 true <a>，然后仅将其添加到 html ad hoc 中作为示例。

于 2012-12-04T14:43:08.547 回答
41

避免将 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 内容，并根据需要激活尽可能多的工具提示。

在 codepen 上进行现场演示

于 2016-01-19T08:45:31.787 回答
35

像往常一样，使用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，他们可能会注入恶意代码。

于 2012-12-04T14:43:33.840 回答
29

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

于 2012-12-04T14:59:00.770 回答
8

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

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

现场样品

于 2012-12-04T14:50:07.313 回答
0

从 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!
     })
});
于 2021-10-09T14:18:56.840 回答