Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML bootstrap popover function

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

like image 446
user2636368 Avatar asked Sep 18 '13 00:09

user2636368


People also ask

How do I use popover in HTML?

How To Create a Popover. To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

How do we define popover in bootstrap?

A Bootstrap Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element.

How do I customize bootstrap popover?

To create a popover, you need to add the data-bs-toggle="popover" attribute to an element. Whereas, popover's title and its content that would display upon trigger or activation can be specified using the title and data-bs-content attribute respectively. Here is the standard markup for adding a popover to a button.

How do I show popover in bootstrap 5?

To create a popover, add the data-bs-toggle="popover" attribute to an element. Note: Popovers must be initialized with JavaScript to work.


1 Answers

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

like image 132
PSL Avatar answered Sep 28 '22 18:09

PSL