jQuery HTML 引导程序弹出函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18861957/
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
HTML bootstrap popover function
提问by user2636368
I was wondering for the popover given by bootstrap I have the following thing -
我想知道 bootstrap 给出的 popover 我有以下几点 -
<a href="javascript: void(0)" id="member1" rel="popover" data-content="Co-President [email protected]" data-original-title="Liz Sample"><img src="femaleprofilepicture2.jpg" class="img-polaroid"></a>
As of now when I click on the image I get both Co-President and [email protected] on the same line. How do I make them appear on different lines.
到目前为止，当我点击图片时，我在同一行看到了 Co-President 和 [email protected]。如何让它们出现在不同的行上。
Thanks
谢谢
回答by PSL
One way you can do this is by making the bootstrap popover content an html and setting html to true and provide a <br/>in between:
可以做到这一点的一种方法是将引导弹出窗口内容设为 html 并将 html 设置为 true 并提供<br/>介于两者之间的内容：
data-content="Co-President <br/> [email protected]"and data-html="true"
data-content="Co-President <br/> [email protected]"和 data-html="true"
i.e:
IE：
<a href="javascript: void(0)" id="member1" data-placement="bottom" rel="popover" data-content="Co-President <br/> [email protected]" data-html="true" data-original-title="Liz Sample"><img src="femaleprofilepicture2.jpg" class="img-polaroid"/></a>
But it is always better to create the html content separately and populate it in the popover via the options.
但是最好单独创建 html 内容并通过选项将其填充到弹出窗口中。
Something like this:
像这样的东西：
HTML:
HTML：
<a href="javascript: void(0)" id="member1" data-contentwrapper=".mycontent" rel="popover"><img src="femaleprofilepicture2.jpg" class="img-polaroid"/></a>
<div class="mycontent"> <!-- Here i define my content and add an attribute data-contentwrapper t0 a selector-->
Co-President <br/>
[email protected]
</div>
JS:
JS：
$('[rel=popover]').popover({
html:true,
placement:'bottom',
content:function(){
return $($(this).data('contentwrapper')).html();
}
});
