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

IT技术 javascript html twitter-bootstrap-3 tooltip
2021-02-02 15:19:10

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

6个回答

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

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

小提琴示例对我不起作用。我仍然看到原始 HTML 代码。
2021-03-18 15:19:10
bootstrap 文档是出了名的垃圾:) 很高兴我能把事情搞清楚！
2021-03-27 15:19:10
请参见此处：jsfiddle.net/44khF/148。此外，如果使用委托，它似乎只适用于 data 属性，而不是在初始化中使用 html: true 。
2021-04-07 15:19:10
可能像您怀疑的那样对 Bootstrap 代码进行了一些更改。在我使用函数属性中的 {html: true} 为 html 标题连接所有工具提示之前，但从 2.2.2 > 2.3.1 开始，我不得不将 data-html="true" 添加到我的元素中，然后废弃了{html: true} 部分。我真的希望他们在第一次就更频繁地尝试把事情做好，而不是在发布之间不断地造成破坏性的变化。
2021-04-12 15:19:10
好吧，他们的文档在该领域并不是那么清楚。感谢分享这个答案！:)
2021-04-13 15:19:10

避免将 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 上进行现场演示

在 Bootstrap 4.5 中运行良好。奇怪的是，这在任何地方都没有记录。
2021-03-18 15:19:10
极好的。我很高兴有人提出了一个解决方案，该解决方案不会将 HTML 直接塞入数据属性中。
2021-03-29 15:19:10

和往常一样，使用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 代码没有被转义并且用户可以自己编辑 bio，他们可能会注入恶意代码。

这是伟大而简单的
2021-03-19 15:19:10
data-original-title是引导程序临时存储（title如果存在）的地方。data-title如果你没有标题就足够了，比如<a href="#" title="xxx">
2021-04-08 15:19:10
你好@MattZeunert 我已经使用它并且运行得很好，但我想根据我即将到来的数据更新标题而不重新加载页面并动态设置，我的意思是更改标题中的内容。
2021-04-08 15:19:10

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

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

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

现场样品

其它你可能感兴趣的问题
上一篇如何从javascript中的子类调用父方法？ 下一篇如何使用 html5 输入类型号处理浮点数和小数点分隔符