Popover inside a table does not work

Question

Popover inside a table does not work

Navigation

#1 by (0 votes)

2

I'm trying to put a popover within a row of a table that is dynamically mounted according to the data coming from the database. I tested out of the table and it worked, but inside the table line did not.

My Js are 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>

javascript html5 bootstrap-3 popover

asked by anonymous 03.10.2017 / 13:29

1 answer

Difference calling a function in DllMain by CreateThread or calling directly Wordpress on Localhost

score 0 · Accepted Answer

The problem is just in the note, your jQuery is not firing the popover.

Add a trigger attribute to <a> within <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 in the event, suggesting for it to add the popover at hover time:

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

Functional example in fiddle: link

NOTE: Include jQuery always before the bootstrap js file.