我可以在 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

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

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

Answer 2

避免在

数据标题中插入 html 的另一种解决方案是使用工具提示 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 ：

目录：

<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>

Javascript：

$("[rel=tooltip]").tooltip({html:true});

html 参数指定如何将工具提示文本转换为 DOM 元素。默认情况下，Html 代码在工具提示中进行转义，以防止 XSS 攻击。假设您在网站上显示用户名，并在工具提示中显示一个小简历。如果 html 代码未转义，并且用户可以自己编辑个人简介，则可能会注入恶意代码。

Answer 4

html data 属性完全按照它在文档中所说的那样做。试试这个小例子，不需要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：

• 引导 2.x
• 引导 3.x

Answer 5

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

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

现场样品

Answer 6

对于引导程序 5，您可以将 data-bs-html="true" 与标题标签一起使用data-bs-original-title="Tooltip Title"

Answer 7

从引导程序 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 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;");
}