jQuery 为什么我的 bootstrap popover 不显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15054484/
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
Why my bootstrap popover doesn't show?
提问by Jean Y.C. Yang
I create a static popoverin bootstrap, but it doesn't work
我在引导程序中创建了一个静态弹出窗口，但它不起作用
some of the html code:
一些html代码：
<div class="container row-fluid" >
<div class="span8 offset2">
<div class="hero-unit">
<h1 class="hidden-phone">Heading</h1>
<div class="row-fluid">
<div class="span5" style="margin-top:30px;">
<div class="popover left" id="welcome">
<div class="arrow"></div>
<h3 class="popover-title">To ALL:</h3>
<div class="popover-content">
<p>count and</p>
<p>。。。</p>
</div>
</div>
</div>
<div class="span6">
<img src="img/welcome/1.jpg" class="img-circle img-polaroid pull-right hidden-phone" />
</div>
</div>
<a class="btn btn-primary btn-large" href="#">TEST NOW!</a>
</div>
</div>
all of my js code:
我所有的js代码：
$('#welcome').popover();
回答by Yusuf
I am giving an example code.
我给出了一个示例代码。
Html:
网址：
<span class="giverscore_tooltip">Example</span>
JS:
JS：
jQuery(document).ready(function() {
$('.giverscore_tooltip').popover({
trigger:'hover',
content:'write a review, create a keyword, invite a friend, and more.',
placement:'top'
});
});
回答by Shail
I can see , what went wrong . The code you are referring to is generated when you create a popover over a button .
我可以看到，出了什么问题。您所指的代码是在按钮上创建弹出框时生成的。
Check JS fiddle with working button Jsfiddle you can edit
检查 JS 小提琴与工作按钮Jsfiddle 你可以编辑
Check in browser Browser and test the button
Section 1:
第 1 节：
<div class="popover left" ">
<div class="arrow"></div>
<h3 class="popover-title">To ALL:</h3>
<div class="popover-content">
<p>count and</p>
<p>。。。</p>
</div>
</div>
So for example you want to create the above content in a popover , you will have to do the following :
因此，例如您想在 popover 中创建上述内容，您必须执行以下操作：
<a id="pop" title="" data-content="<p>Content and</p><p> Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</p>" data-placement="left" data-toggle="popover" class="btn" href="#" data-original-title="Popover on left" data-html="true">Try me</a>
So when you will click this button the above code in section 1 will generate . Also remember if you want to use html content set data-html="true"
因此，当您单击此按钮时，第 1 部分中的上述代码将生成 . 还请记住，如果您想使用 html 内容集data-html="true"
回答by isherwood
You must apply the popover function to the button, not the content.
您必须将 popover 功能应用于按钮，而不是内容。
$('.btn').popover();
This still doesn't completely solve the problem, since you haven't associated your content div with this button, but it's a start.
这仍然不能完全解决问题，因为您还没有将内容 div 与此按钮相关联，但这只是一个开始。
UPDATE: After gaining a better understanding of what the OP is after, I think it could be accomplished simply by showing the popover after it's initialized:
更新：在更好地了解 OP 之后，我认为它可以通过在初始化后显示弹出框来完成：
$(div#welcome').popover();
$('div#welcome').show();
This is a very roundabout way to do nothing more than style an element like a popover, however. It should really be done with CSS alone.
然而，这是一种非常迂回的方式，只不过是为一个元素设置样式，例如弹出框。它真的应该单独使用 CSS 来完成。
