Функция загрузочного буфера HTML

Мне было интересно, что такое popover, данное bootstrap, у меня есть следующее:

<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>

На данный момент, когда я нажимаю на изображение, я получаю как сопредседателя, так и [email protected] в той же строке. Как заставить их отображаться на разных строках.

Спасибо

Ответ 1

Один из способов сделать это - сделать bootstrap popover content html и установить html в true и предоставить <br/> между ними:

data-content="Co-President <br/> [email protected]" и data-html="true"

то есть:

<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>

Fiddle

Но всегда лучше создать контент 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/> 
    [email protected]
</div>

JS:

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

Fiddle