Search code examples
javascriptjqueryhtmlpopoverjscript

How to bind element attributes with Bootstrap Popover html using jquery or JavaScript?

Given below is a code that contains a button. On the button's click a popover is shown with hard-coded details.

  1. Is it possible for the popover to get details from the Buttons attributes e.g. data-name = "Vikas" data-content = "He is a student" data-dp = "../dp.jpg"

  2. Second issue is that the popover is closed when the user click again on the button. Is it possible to to stop it and instead of this can we give a close button in popover and on its click the popover should be closed.

Many thanks for any help.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <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">×</a>',
        content: '<div class="media"><a href="#" class="pull-left"><img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">Jhon Carter</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
      });
      $(document).on("click", ".popover .close", function() {
        $(this).parents(".popover").popover('hide');
      });
    });
  </script>
  <style type="text/css">
    .bs-example {
      margin: 160px 10px 0;
    }
    .popover-title .close {
      position: relative;
      bottom: 3px;
    }
  </style>
</head>

<body>
  <div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover">Click Me</button>
  </div>
</body>

</html>

Solution

  • Just an example, should help you:

    1. Dynamic content:

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <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: function() {           
           return $(this).data('title') + '<a href="#" class="close" data-dismiss="alert">×</a>'; 
        },
        content: function() {
           return $(this).data('content'); 
        }
      });
      $(document).on("click", ".popover .close", function() {
        $(this).parents(".popover").popover('hide');
      });
    });
  </script>
  <style type="text/css">
    .bs-example {
      margin: 160px 10px 0;
    }
    .popover-title .close {
      position: relative;
      bottom: 3px;
    }
  </style>
</head>

<body>
  <div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover" data-title="Custom Title" data-content="Custom Content">Click Me</button>
  </div>
</body>

</html>

    1. Look at the popover trigger param:

    How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.