Popover inside a table does not work

Question

I’m trying to put a Popover inside a row of a table that’s dynamically assembled according to the data coming from the database. I tested out of the table and it worked, but inside the table row no.

my Js is like this

 $(document).ready(function(){
            $('[data-toggle="popover"]').popover();   
        });

my html is like this

<tbody ng-repeat="dis in distritos ">
                    <tr>
                      <td>{{dis.idDistrito}}</td>
                      <td>{{dis.nome}}</td>
                      <td>{{dis.codigoDne}}</td>    
                     <td><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

                    </td>
                    </tr>                       

Answer 1

The problem is only in the note, your jQuery is not firing the Popover.

Add an attribute trigger at the <a> inside <td>:

<a href="#" data-toggle="popover" title="teste" data-trigger="hover" data-content="Some content inside the popover">Toggle popover</a>

And make a slight change to the event, deciding to add the Popover at the time of the event:

$(document).ready(function(){
    $('[data-toggle="popover"').on('mouseover',function(){
        $(this).popover();   
    })
});

Functional example in fiddle: https://jsfiddle.net/AnthraxisBR/nerpsqt7/2/

NOTE: include jQuery always before bootstrap js file.