Мне было интересно, что такое 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] в той же строке. Как заставить их отображаться на разных строках.
Спасибо
Один из способов сделать это - сделать 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>
Но всегда лучше создать контент 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();
}
});