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
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.
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.
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.
To create a popover, add the data-bs-toggle="popover" attribute to an element. Note: Popovers must be initialized with JavaScript to work.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With