Javascript 我可以将复杂的HTML与Twitter引导一起使用吗'；什么是工具提示？

如果我选中，我可以看到一个名为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？

此参数仅涉及是否要在工具提示中使用复杂html。将其设置为

true

，然后将html放入标记的

title

属性中

---

查看此提琴-我已通过

标记中的

data html=“true”

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

与正常情况一样，使用

数据原始标题

：

Html:

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

如果您希望将html添加到工具提示中，请将“html”选项设置为true。实际html由选项“title”确定（不应设置链接的title属性）

工具提示（{placement:'bottom'，title:'

par

，html:true}）；

---

html数据属性完全按照文档中的说明执行。试试这个小例子，不需要JavaScript（分成几行进行说明）：

将鼠标悬停在我上方以查看HTML

JSIDLE演示：

---

避免在数据标题中插入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>

你好，世界

提示标题
这是我的提示内容

$（文档）.ready（函数（）{
//工具提示
$（'.tip'）。每个（函数（）{
$（此）。工具提示(
{
是的，
标题：$（'#'+$（this.data（'tip'））.html（）
});
});
});

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

---

现场演示

他们的文档在这方面不是很清楚。谢谢分享这个答案！：）bootstrap文档是出了名的垃圾：）很高兴我能把事情弄清楚！小提琴的例子不适合我。我仍然看到原始的HTML代码。可能像您怀疑的那样对引导代码进行了一些更改。在我使用函数属性中的{html:true}将所有工具提示连接到html标题之前，但是从2.2.2>2.3.1开始，我必须向元素中添加data html=“true”，并取消{html:true}部分。我真的希望他们能在第一次尝试更频繁地做正确的事情，而不是在发布之间不断地进行破坏性的更改。请参阅此处：。此外，它似乎只对数据属性起作用，若使用了委托，则在初始化中不使用html:true。

data-original-title

是引导临时存储

title

的地方（若存在）<代码>数据标题如果你没有标题就足够了，比如

这很好，很简单@MattZeunert我用过它，运行得很好，但是我想根据我即将到来的数据更新标题，而不需要重新加载页面并动态设置，我的意思是更改标题内的内容。太棒了。我很高兴有人提出了一个解决方案，它不会将HTML直接塞进数据属性中。在Bootstrap4.5中效果很好。奇怪的是，这在任何地方都没有记录。

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

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

<!-- 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>