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

javascript html tooltip twitter-bootstrap-3

2022-08-30 02:59:34

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

答案 1

此参数只是关于您是否要在工具提示中使用复杂的 html。将其设置为，然后将 html 打入标记的属性中。truetitle

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

答案 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 内容，并根据需要激活任意数量的工具提示。

在编解码器上实时演示