twitter-bootstrap 带有 html 内容的 bootstrap popover
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30676873/
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
bootstrap popover with html content
提问by Mitch VanDuyn
I am trying to get separate the bootstrap popover content from the html attributes like you can do with other components, but I can't get it to work...
我正在尝试将 bootstrap popover 内容与 html 属性分开，就像您可以处理其他组件一样，但我无法让它工作......
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<p>Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method.</p>
<div class="popover" >
<a href="#" class="popover-toggle" title="Popover Header" >Toggle popover</a>
<div class="popover-content">
Here I am
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
回答by Ivan Borshchov
You have simple anchor and some div which should not be displayed.
您有简单的锚点和一些不应显示的 div。
<a href="#" id="tglr" class="popover-toggle" title="Popover Header">Toggle popover</a>
<div id="customdiv" style="display: none">
Here <b>I</b> am
</div>
In JS we get our anchor (by id) and install popover on it with 2 options: first 'html' - allows to display html instead of simple text, second specifies content, which obtained from our div:
在 JS 中，我们获取锚点（通过 id）并使用 2 个选项在其上安装 popover：第一个 'html' - 允许显示 html 而不是简单的文本，第二个指定从我们的 div 获得的内容：
$(document).ready(function(){
$('#tglr').popover({
html : true,
content: function() {
return $('#customdiv').html();
}
});
});
Here is your example https://jsfiddle.net/DTcHh/8529/
这是您的示例https://jsfiddle.net/DTcHh/8529/
One of the issues of your code - you perform $('[data-toggle="popover"]') which will select tags with data-toggle that equals to "popover"), but you have no such tags. If you want to initalize popovers this way you should declare anchor like this:
您的代码问题之一 - 您执行 $('[data-toggle="popover"]') 它将选择具有等于“popover”的数据切换的标签），但您没有这样的标签。如果你想以这种方式初始化弹出框，你应该像这样声明锚点：
<a href="#" data-toggle="popover" class="popover-toggle" title="Popover Header">Toggle popover</a>
But in your case you have only one link with one custom popover, so it is more logically select it by id.
但是在您的情况下，您只有一个带有一个自定义弹出窗口的链接，因此更合乎逻辑地按 id 选择它。
