Bootstrap Popover overlay by DataTables JQuery

Question

I am working with DataTables JQuery and for each row I have dynamic text. This datatable shows on Modal.

I am trying to use bootstrap popover but doesn't work right.Its look like overlay by the table.

Half of my popover not appearing.

fiddle link seems working but in my case (loading remote modal with dynamic datatable doesnt work

Table

<td class="noteTable">
    <div class="show-popover" data-toggle="popover" title="{{$log->newStatusText}}">
        {{substr(($log->newStatusText),0,50)}}
    </div>
</td>

And Script is

<script type="text/javascript">
$('[data-toggle="popover"]').popover({
    'trigger': 'hover',
    'placement': 'left',
});

My datatable script

<script type="text/javascript">
$(document).ready(function() {
    $('#showLogTable').dataTable( {
        "order": [[ 4, "desc" ]],
        "scrollY": 400,
        "destroy": true,
        "pagingType": "simple",
        "scrollCollapse": true,
        "dom": '<"top"f>t<"bottom"ip><"clear">'
    } );
} ); 
</script>

Thanks for advance!

UPDATE:

my ugly solution is

fiddle expanding row to bottom (working localhost as expected but on fiddle doesn't look like working)

Update 2

When I set 'container': 'body' popover goes behind modal! Any idea how to bring front?

Answer 1

Here is the solution for modal

This will help for Modal users

$('[data-toggle="popover"]').popover({
'trigger': 'hover',
'placement': 'left',
'container': '.modal-body'
});