How to bind element attributes with Bootstrap Popover html using jquery or JavaScript?
<p>Given below is a code that contains a button. On the button's click a popover is shown with hard-coded details.</p>

<ol>
<li><p>Is it possible for the popover to get details from the Buttons attributes e.g. <code>data-name = "Vikas" data-content = "He is a student" data-dp = "../dp.jpg"</code></p></li>
<li><p>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 <em>close</em> button in popover and on its click the popover should be closed.</p></li>
</ol>

<p>Many thanks for any help.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
      $('[data-toggle="popover"]').popover({
        placement: 'top',
        html: true,
        title: 'User Info &lt;a href="#" class="close" data-dismiss="alert"&gt;×&lt;/a&gt;',
        content: '&lt;div class="media"&gt;&lt;a href="#" class="pull-left"&gt;&lt;img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image"&gt;&lt;/a&gt;&lt;div class="media-body"&gt;&lt;h4 class="media-heading"&gt;Jhon Carter&lt;/h4&gt;&lt;p&gt;Excellent Bootstrap popover! I really love it.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;'
      });
      $(document).on("click", ".popover .close", function() {
        $(this).parents(".popover").popover('hide');
      });
    });
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
    .bs-example {
      margin: 160px 10px 0;
    }
    .popover-title .close {
      position: relative;
      bottom: 3px;
    }
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class="bs-example"&gt;
    &lt;button type="button" class="btn btn-primary" data-toggle="popover"&gt;Click Me&lt;/button&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>