HTML引导弹出功能

Question

我想知道bootstrap给出的popover我有以下的东西 -

<a href="javascript: void(0)" id="member1" rel="popover" data-content="Co-President sample@uic.edu" data-original-title="Liz Sample"><img src="femaleprofilepicture2.jpg" class="img-polaroid"></a>

截至目前,当我点击图片时,我同时获得了联合总裁和sample@uic.edu.如何让它们出现在不同的行上.

谢谢

Answer 1

一种方法是将bootstrap popover内容设为html并将html设置为true并<br/>在两者之间提供:

data-content="Co-President <br/> sample@uic.edu" 和 data-html="true"

即:

<a href="javascript: void(0)" id="member1" data-placement="bottom" rel="popover" data-content="Co-President <br/> sample@uic.edu" data-html="true" data-original-title="Liz Sample"><img src="femaleprofilepicture2.jpg" class="img-polaroid"/></a>

小提琴

但最好分别创建html内容并通过选项在popover中填充它.

像这样的东西:

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/> 
    sample@uic.edu
</div>

JS:

$('[rel=popover]').popover({
    html:true,
    placement:'bottom',
    content:function(){
        return $($(this).data('contentwrapper')).html();
    }
});

小提琴