twitter-bootstrap 如何使 Bootstrap 弹出窗口与单独元素中的 HTML 内容一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23538609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make Bootstrap popover work with HTML content in a seperate element
提问by Martin Devillers
I am in the process of combining Bootstrap panels with Bootstrap popover functionality. The goal is to show a popover when the user hovers the panel's header. I've already got this to work, except that the data-content=""part becomes quite unmanageable when it has a lot of HTML inside.
我正在将 Bootstrap 面板与 Bootstrap 弹出窗口功能相结合。目标是在用户将鼠标悬停在面板的标题上时显示一个弹出框。我已经让这个工作了，除了data-content=""当它里面有很多 HTML 时，这个部分变得非常难以管理。
Below is some sample HTML I am working with. The part that says "LOADS OF HTML" contains div's, table's, p's, etc.
下面是我正在使用的一些示例 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>
Other Bootstrap plugins solve this issue by allowing you to put the HTML in a separate element and then reference that element with a "data-target" attribute. Unfortunately, Popover does not support this. How do I mimic this behavior without writing element specific JavaScript?
其他 Bootstrap 插件通过允许您将 HTML 放在单独的元素中，然后使用“数据目标”属性引用该元素来解决此问题。不幸的是，Popover 不支持这一点。如何在不编写特定于元素的 JavaScript 的情况下模仿这种行为？
采纳答案by Martin Devillers
An elegant solution is to place the HTML-content inside a script-tag with an id and then add a data-target="element_id_goes_here"attribute to the element that will trigger the popover. Since you're using popover you should already have some generic JavaScript somewhere that initializes the plugin. You can extend this JavaScript with a few lines of code.
一个优雅的解决方案是将 HTML 内容放在一个带有 id 的脚本标签中，然后data-target="element_id_goes_here"向将触发弹出窗口的元素添加一个属性。由于您使用的是 popover，因此您应该已经在某个地方使用了一些通用 JavaScript 来初始化插件。您可以使用几行代码扩展此 JavaScript。
HTML
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
JavaScript
$("[data-toggle='popover']").each(function(index, element) {
var contentElementId = $(element).data().target;
var contentHtml = $(contentElementId).html();
$(element).popover({
content: contentHtml
});
});
回答by Rob Schmuecker
Any text/HTML you want to display in the popover can be added in a DIVwhich has a display:none;CSS property to it.
You can pass a function to the contentproperty of the popover options which gets the content from the hidden DIV. This way one doesn't need to reference by ID and insert script tags.
您想在弹出窗口中显示的任何文本/HTML 都可以添加到DIV具有display:none;CSS 属性的a 中。您可以将一个函数传递给contentpopover 选项的属性，该属性从 hidden 中获取内容DIV。这样就不需要通过 ID 引用和插入脚本标签。
Here is an example http://jsfiddle.net/wb3n8/
这是一个例子http://jsfiddle.net/wb3n8/
HTML:
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:
CSS：
.my-popover-content {
display:none;
}
Javascript:
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);
});
回答by Alexus1024
Solution, based on Martin Devillers post, but more flexible (passes all data-* tags into bootstrap js)
解决方案，基于 Martin Devillers 的帖子，但更灵活（将所有 data-* 标签传递到 bootstrap js）
$("[data-toggle='popover']").each(function (index, element) {
var data = $(element).data();
if (data.target) {
var contentElementId = data.target;
var contentHtml = $(contentElementId).html();
data.content = contentHtml;
}
$(element).popover(data);
});
回答by Matt Hooper
About Alexus1024 solution : I had to add a "#" before data.target in order to have jquery correctly selecting the target :
关于 Alexus1024 解决方案：为了让 jquery 正确选择目标，我必须在 data.target 之前添加一个“#”：
var contentElementId = "#"+data.target;
