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

Question

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

这个参数只是关于是否要在tooltip中使用复杂的html。将其设置为

true

，然后将html打入标签的

title

属性。

See this fiddle here - 我已经通过

data-html="true"

标签中的

<a>

将 html 属性设置为 true，然后作为示例添加到 html ad hoc 中。

Answer 2

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

Answer 3

就像平常一样，使用

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

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

活体样本

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!
     })
});

Answer 7

对于 bootstrap 5，你可以使用

data-bs-html="true"

和标题标签

data-bs-original-title="Tooltip Title"

Answer 8

在文本中使用转义字符的工具提示中有同样的问题，通过在启用工具提示之前使用文本内容和转义字符的自定义属性解决了这个问题：

在 JSP/HTML 中

<a id="myTooltip" href="#"
    class="country-list-trigger" data-toggle="tooltip" data-alternative-title="Text with "escaped characters" ==> this should be displayed ==>  "as it is""
    data-html="true" title=""> 
        <i class="fa fa-info-circle fa-2"></i>
</a>

在 Javascript 中

$(document).ready(function() {
    enableAllTooltips();
} );

// enable tooltip after getting the title from the custom attribute (does not work when using the default attribute: data-original-title)
function enableAllTooltips() {
  $('[data-toggle="tooltip"]').tooltip({
      template: '<div class="tooltip tooltip-custom"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
      title: function() {
        return escapeHtml(this.getAttribute('data-alternative-title'));
      }
  })
}


// Custom method for replacing escaped characters by there character entities 
function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}