javascript - 如何使 Bootstrap 弹出窗口在单独的元素中处理 HTML 内容

Question

我正在将 Bootstrap 面板与 Bootstrap 弹出窗口功能相结合。目标是在用户将鼠标悬停在面板的标题上时显示弹出窗口。我已经让它工作了，除了 data-content="" 部分在里面有很多 HTML 时变得非常难以管理。

下面是我正在使用的一些示例 HTML。表示“加载 HTML”的部分包含 div、表、p 等。

<div class="panel panel-default">
    <div class="panel-heading">
        <i class="fa fa-briefcase fa-fw"></i> 
        <abbr title="Panel title" data-container="body" data-toggle="popover" 
              data-placement="bottom" data-trigger="hover" data-html="true" 
              data-content="<div>LOADS OF HTML HERE</div>">
          Panel title
        </abbr>
        <div class="col-xs-6 col-md-4 pull-right" style="margin-top: -4px;">
            <!-- some buttons go here -->
        </div>
    </div>
    <!-- /.panel-heading -->
    </div>
    <!-- some panel content goes here -->
</div>

其他 Bootstrap 插件通过允许您将 HTML 放在一个单独的元素中然后使用“data-target”属性引用该元素来解决这个问题。不幸的是，Popover 不支持这个。如何在不编写特定于元素的 JavaScript 的情况下模仿此行为？

Answer 1

您想要在弹出窗口中显示的任何文本/HTML 都可以添加到具有 display:none; CSS 属性的 DIV 中。您可以将一个函数传递给弹出选项的 content 属性，它从隐藏的 DIV 获取内容。这样就不需要通过 ID 引用和插入脚本标签。

这是一个例子 http://jsfiddle.net/wb3n8/

HTML:

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Panel title 1</h3>

        </div>
        <div class="panel-body">Panel content 1</div>
        <div class="my-popover-content">Here is some hidden content 1</div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Panel title 2</h3>

        </div>
        <div class="panel-body">Panel content 2</div>
        <div class="my-popover-content">Here is some hidden content 2</div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Panel title 3</h3>

        </div>
        <div class="panel-body">Panel content 3</div>
        <div class="my-popover-content">Here is some hidden content 3</div>
    </div>
</div>

CSS:

.my-popover-content {
    display:none;
}

Javascript:

$(document).ready(function () {
    popoverOptions = {
        content: function () {
            // Get the content from the hidden sibling.
            return $(this).siblings('.my-popover-content').html();
        },
        trigger: 'hover',
        animation: false,
        placement: 'bottom',
        html: true
    };
    $('.panel-heading').popover(popoverOptions);
});