I am trying to add a bootstrap popover to a div element that contains arbitrary content like so (but what I came up with doesn't work):

<div id="popover-target">
   <h3>I need a popover</h3>
      <p>
        This is some content for the section
        that needs to be explained by the popover.
      </p>
</div>
<button class="btn">Show popover</button>

<script>
    $(function(){
        $('.btn').click(function(){
            $('#popover-target').popover({title: 'Title', content: 'Test Content', container: 'body', placement: 'right'});
        });
    });
</script>

If I change $('#popover-target') to $('.btn') then the popover displays correctly. Any ideas?

I am trying to add a bootstrap popover to a div element that contains arbitrary content like so (but what I came up with doesn't work):

<div id="popover-target">
   <h3>I need a popover</h3>
      <p>
        This is some content for the section
        that needs to be explained by the popover.
      </p>
</div>
<button class="btn">Show popover</button>

<script>
    $(function(){
        $('.btn').click(function(){
            $('#popover-target').popover({title: 'Title', content: 'Test Content', container: 'body', placement: 'right'});
        });
    });
</script>

If I change $('#popover-target') to $('.btn') then the popover displays correctly. Any ideas?

• javascript
• jquery
• html
• twitter-bootstrap
• popover

• is second $ a typo in $('$popover-target') – guradio Commented Jun 9, 2017 at 11:39
• @guradio yes it was a typo, sorry fixed it. – Maxence Coulibaly Commented Jun 9, 2017 at 17:42

2 Answers 2

You have just initialized the popover on button click which should work fine, if you hover over the #popover-target div after button click. If you want to show it after button click with hovering over it, you can use .popover('show') like:

$('.btn').click(function() {
  $('#popover-target').popover({
      trigger: 'hover',
      title: 'Title',
      content: 'Test Content',
      placement: 'bottom'
    })
    .popover('show');
});

$(function(){
$('.btn').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">Hello</div>';
      }
    });
    
  
});

$('.btn').click(function(){
      $('#btn').popover();
  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="popover-target">
   <h3>I need a popover</h3>
      <p>
        This is some content for the section
        that needs to be explained by the popover.
      </p>
</div>
<button class="btn">Show popover</button>