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

143

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

— Sergserg
source

256

此参数与是否要在工具提示中使用复杂的html有关。将其设置为true，然后将html插入title标记的属性。

看到这个小提琴这里 -我给自己定的HTML属性为true通过data-html="true"在<a>标签，然后就在html特设添加作为一个例子。

— 乔治·威尔逊
source

3

那么他们的文档在那个领域还不是很清楚。感谢您分享这个答案！:)

— sergserg

3

引导文档臭名昭著地是垃圾:)很高兴我可以清理一下！

— 乔治·威尔逊

6

小提琴的例子对我不起作用。我仍然看到原始的HTML代码。

— Sonson123

3

您可能怀疑对Bootstrap代码进行了一些更改。在使用函数属性中的{html：true}为html标题连接所有工具提示之前，但是从2.2.2> 2.3.1开始，我必须将data-html =“ true”添加到我的元素中，然后废弃{html：true}部分。我真的希望他们能在第一时间尝试更正确地处理事情，而不会在发行版之间造成不断的更改。

— Andrew Swihart 2013年

1

看到这里：jsfiddle.net/44khF/148。另外，它似乎仅与data属性一起使用，而不使用html：如果使用委托，则在初始化中为true。

— ptutt

34

像往常一样，使用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代码，并且用户可以自己编辑生物，则可能注入恶意代码。

— 马特·泽纳特
source

5

data-original-title是引导程序临时存储的位置（title如果存在）。data-title如果您没有标题，就足够了，例如<a href="#" title="xxx">

— davidkonrad

那很棒又简单

— Gayan 2015年

您好@MattZeunert我已经使用过它并且运行得很好，但是我想根据即将来临的数据更新标题，而无需重新加载页面和动态设置，我的意思是更改标题内的内容。

— 3条规则

32

避免在数据标题中插入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上进行现场演示

— 米格利
source

太棒了我很高兴有人提出了一种不会将HTML直接塞入data属性的解决方案。

— 和平

27

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

— 戴维·康拉德
source

7

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

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

现场样本

— 安德里·F。
source