Add Image inside Popover - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Popover

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Popover

Description

Add Image inside Popover

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8"> 
  <title>Example of Bootstrap Popover with Images</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
  <script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
    trigger : 'hover',
        html : true,
        content : '<div class="media"><a href="#" class="pull-left"><img src="https://www.java2s.com/style/demo/Firefox.png" class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">test</h4><p>Bootstrap popover! test test test test</p></div></div>'
    });<!--  ww w. j ava  2s  .  com-->
});
</script> 
  <style type="text/css">
  .bs-example{
      margin: 200px 150px 0;
    }
  .button{
    margin: 10px;
</style> 
 </head> 
 <body> 
  <div> 
   <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>

Related Tutorials