Display Image in Bootstrap Popover
Display Image in Bootstrap Popover – Sometimes we need to display the images in popover. There are many ways to display images in popover. Here in this tutorial we are going to explain few simplest method to add the image. We will explain this with example and demo.
Display Image in Bootstrap Popover Example
You can add images in bootstrap popover simply as below-
Display Image in Bootstrap Popover : Using jQuery (JavaScript)
<script type="text/javascript">
$(document).ready(function(){
var myimg = "<img src='//tutorialsplane.com/wp-content/uploads/2016/03/CaptureAdmin.png' height='200px' width='200px'>";
$('#demopopover').popover({ title: 'Demo Image', content: myimg, html:true });
});
</script>
<a href="#" id='demopopover' >Popover WIth Image</a>
|
In the above example we have used javascript to create popover and add image.
$(selector).popover({ title: ‘Your Title’, content: content_data, html:true }); – title is used to add the title in the popover, content is used to add content so we have passed image url to add the image. set the html parameter to true.
If you run the above example it will produce the following output-
Advertisements
