Question

172

HTML bootstrap popover function

rated 0 times [ 179] [ 7] / answers: 1 / hits: 35482 / 11 Years ago, wed, september 18, 2013, 12:00:00

I was wondering for the popover given by bootstrap I have the following thing -

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

Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

annaw

Add To Favorites

Follow

Total Points: 18

Total Questions: 91

Total Answers: 98

Location: Guam

Member since Fri, Jun 18, 2021

3 Years ago

answered 11 Years ago chase · Accepted Answer

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:

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

i.e:

<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

But it is always better to create the html content separately and populate it in the popover via the options.

Something like this:

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