twitter-bootstrap Bootstrap 静态弹窗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21299848/
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 static popover
提问by developer82
In the bootstrap popover documentation (http://getbootstrap.com/javascript/#popovers) they show on the page the the popover looks like in a static way (before the example where it's connected to the buttons).
在 bootstrap popover 文档 ( http://getbootstrap.com/javascript/#popovers) 中，它们在页面上以静态方式显示了 popover 的样子（在它连接到按钮的示例之前）。
I would like to show a popover on my page as an explanation to something on my site - but would like it to always show, without the user having to click anything.
我想在我的页面上显示一个弹出框作为对我网站上某些内容的解释 - 但希望它始终显示，而无需用户单击任何内容。
how can I show a static popover like they do? couldn't find an option.
我怎样才能像他们一样显示静态弹出框？找不到选项。
Thanks
谢谢
回答by davidpauljunior
If you inspect the HTML that Bootstrap use in their examples they've simply removed the fadeclass from the HTML element and then overriden a few of the default styles.
如果您检查 Bootstrap 在他们的示例中使用的 HTML，他们只是fade从 HTML 元素中删除了该类，然后覆盖了一些默认样式。
HTML
HTML
<div class="popover-example"> <!-- NEW -->
<div class="popover top">
<div class="arrow"></div>
<h3 class="popover-title">Popover top</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
</div>
CSS
CSS
.popover-example .popover {
position: relative;
display: block;
margin: 20px;
}
回答by rboarman
Try this:
试试这个：
$('your_selector').popover('show');
回答by developer82
Found a fairly simple solution (not sure if it's the best one - but it gets the job done).
找到了一个相当简单的解决方案（不确定它是否是最好的 - 但它完成了工作）。
To my popover html I added a class that I called .static-popover:
我在 popover html 中添加了一个名为 .static-popover 的类：
<div class="popover left static-popover" id="testPopover">
<div class="arrow"></div>
<h3 class="popover-title">Popover left</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
css class:
css类：
.static-popover { display: block !important; }
since the starting location of the popover div it at top:0 and left:0, in my case I've created a css definition for "testPopover" with the appropriate top & left for my needs.
由于popover div的起始位置在顶部：0和左侧：0，在我的情况下，我已经为“testPopover”创建了一个css定义，并根据我的需要使用适当的顶部和左侧。
回答by Clinton Green
I like the idea of adding the static-popover class. With that in mind, just add a JS function.
我喜欢添加 static-popover 类的想法。考虑到这一点，只需添加一个 JS 函数。
$('.static-popover').show().css('position','relative');
回答by Rose
A slightly different approach is to programmatically display it on page load. And disable the hide event ('hide.bs.popover') of the popover. Say I've a form (id=myForm) to which I wanted a popover associated. And I want the popover to always show. Assuming you are using jquery, you can do the following:
一种稍微不同的方法是在页面加载时以编程方式显示它。并禁用弹出窗口的隐藏事件（'hide.bs.popover'）。假设我有一个表单 (id=myForm)，我想要一个相关联的弹出框。我希望弹出框始终显示。假设您使用的是 jquery，您可以执行以下操作：
$("#myForm").popover();
$("#myForm").popover("show");
$('#myForm').on('hide.bs.popover', function () { return false;});
