Popover Boostrap 3 - Does not appear

Question

Popover Boostrap 3 - Does not appear

Navigation

#1 by (2 votes)

2

I have 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, it does not show any results from my popOver in the click action (the DOM even receives a change) , but the popover does not appear, and when I query 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 you do to fix it?

javascript bootstrap popover

asked by anonymous 15.02.2017 / 03:54

1 answer

Treat empty field even containing spaces Sending Data via Link (POST or GET)

score 2 · Answer 1

The documentation informs you that this 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 JavaScript , and this is what is firing 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><scriptsrc="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>