我正在将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的情况下模仿此行为？
解决方法
您想要在弹出窗口中显示的任何文本/ HTML都可以添加到具有display：none;的DIV中.它的CSS属性.
您可以将函数传递给popover选项的content属性,该属性从隐藏的DIV获取内容.这样就不需要通过ID引用并插入脚本标记.
您可以将函数传递给popover选项的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);
});
