Question

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

以下是我正在使用的一些HTML示例。 “负载HTML”的部分包含div，table，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

您想要在popover中显示的任何文本/ HTML都可以添加到DIV中，该display:none;具有content CSS属性。您可以将函数传递给弹出框选项的DIV属性，该属性从隐藏的<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>获取内容。这样就不需要通过ID引用并插入脚本标记。

以下是http://jsfiddle.net/wb3n8/

的示例

HTML：

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

CSS：

$(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);
});

Javascript：

{{1}}

Answer 2

一个优雅的解决方案是将HTML内容放在带有id的script-tag中，然后将data-target="element_id_goes_here"属性添加到将触发弹出窗口的元素中。由于您正在使用popover，因此您应该已经在初始化插件的地方使用了一些通用JavaScript。您可以使用几行代码扩展此JavaScript。

<强> HTML

<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-target="#my-popover-content">
          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>

<script type="text/html" id="my-popover-content">
    *** HTML CONTENT GOES HERE ***
</script>

<强>的JavaScript

$("[data-toggle='popover']").each(function(index, element) {
    var contentElementId = $(element).data().target;
    var contentHtml = $(contentElementId).html();
    $(element).popover({
        content: contentHtml
    });
});

Answer 3

解决方案，基于Martin Devillers的帖子，但更灵活（将所有数据 - *标签传递给bootstrap js）

tabulate

Answer 4

关于Alexus1024解决方案：为了使jquery正确选择目标，我必须在data.target之前添加一个“＃”：

var contentElementId = "#"+data.target;

如何使Bootstrap popover在单独的元素中使用HTML内容

4 个答案: