belongs to collection: BOOTSTRAP / SASS Frequently Asked Questions
How to insert image inside Bootstrap popover
content
You can pass the content option to the Bootstrap .popover() method to insert the images inside the popovers. You can also set this option using the data-content attribute.
.popover()
data-content
Let's try out the following example to understand how it basically works:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Show Images in Bootstrap Popovers</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.5.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover({ placement : 'top', trigger : 'hover', html : true, content : '<div class="media"><img src="images/avatar-tiny.jpg" class="mr-3" alt="Sample Image"><div class="media-body"><h5 class="media-heading">Jhon Carter</h5><p>Excellent Bootstrap popover! I really love it.</p></div></div>' }); }); </script> <style> .wrapper{ margin: 200px 150px 0; } </style> </head> <body> <div class="wrapper"> <button type="button" class="btn btn-primary" data-toggle="popover">Popover without Title</button> <button type="button" class="btn btn-primary" data-toggle="popover" title="User Info">Popover with Title</button> </div> </body> </html>
total answers (1)
start bookmarking useful questions and collections and save it into your own study-lists, login now to start creating your own collections.
Use the Popover's
content
OptionYou can pass the
content
option to the Bootstrap.popover()
method to insert the images inside the popovers. You can also set this option using thedata-content
attribute.Let's try out the following example to understand how it basically works:
need an explanation for this answer? contact us directly to get an explanation for this answer