Popover Boostrap 3 - Does not appear

Question

I’m with the following html code:

<button class="thumb-hearth pop" data-toggle="popover" title="Likes" data-placement="top" data-trigger="focus" data-content="Teste">
     <i class="glyphicon glyphicon-heart"></i>
</button>

With the following JS:

$(document).ready(function(){
  $('.pop').popover().click(function() {
    setTimeout(function() {
      $('.pop').popover('hide');
    }, 1500);
  });
});

However, there is no result of mine click action (DOM gets a change), but Popover does not appear, and when I consult the console, I see the following error:

Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at a.MixItUp._processClick (mp-jquery.mixitup.min.js:14)
    at HTMLLIElement.<anonymous> (mp-jquery.mixitup.min.js:14)
    at HTMLLIElement.dispatch (mp-jquery.min.js:3)
    at HTMLLIElement.r.handle (mp-jquery.min.js:3)

I have no idea where the error might be. What could I do to fix?

Answer 1

To documentation informs that such a mechanism (popover) is not automatic. You need to instantiate / initialize (see Opt-in Functionality).

In the snippet below you will see $('[data-toggle="popover"]').popover(); in the Javascript, and that’s what’s triggering the instance.

$(function () {
  $('[data-toggle="popover"]').popover();
  $('.pop').popover().click(function() {
    setTimeout(function() {
      $('.pop').popover('hide');
    }, 1500);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<br><br>
<button class="thumb-hearth pop" data-toggle="popover" title="Likes" data-placement="top" data-trigger="focus" data-content="Teste">
     <i class="glyphicon glyphicon-heart"></i>
</button>