Add Close Button in Popover - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Popover

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

Description

Add Close Button in Popover

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8"> 
  <title>Example of Bootstrap Popover with Close Button</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',
        html : true,
        title : 'User Info <a href="#" class="close" data-dismiss="alert">&times;</a>',
        content : '<div class="media"><a href="#" class="pull-left"><img src="https://www.java2s.com/style/demo/Opera.png" class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">test</h4><p>Bootstrap popover! This is a test. This is a test. This is a test..</p></div></div>'
    });<!--from w  w  w.  ja  v  a 2s. com-->
    $(document).on("click", ".popover .close" , function(){
        $(this).parents(".popover").popover('hide');
    });
});
</script> 
  <style type="text/css">
  .bs-example{
      margin: 200px 150px 0;
    }
    .popover-title .close{
        position: relative;
        bottom: 3px;
    }
</style> 
 </head> 
 <body> 
  <div> 
   <button type="button" class="btn btn-primary" data-toggle="popover">Click Me</button> 
  </div>   
 </body>
</html>

Related Tutorials