bootstrap Data-toggle is not working with dynamically created control

Question

I am creating a dynamic table with below j query code

below is my html table in which, I will add rows with jquery code

<table id="DataTable" class="table">
            <thead>              
                <tr class="sticky-th">
                    <th width="2%" id="tdid2"></th>                    
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
                <tr>
                </tr>
            </tfoot>
        </table>

below Jquery code used to add rows into html table

function BindTable_New(data) {
    debugger;
    $('#DataTable tbody').empty();     

        $.each(data, function (i, item) {
            var rows = "<tr class= 'hovered-row' > \
                                    <td width='100%'><i class='fa fa-trash fa-lg text-primary delete-icon' data-toggle='collapse' data-placement='bottom' data-original-title='C'  id = 'delicon' aria-hidden='true'></i></td></tr>";
            $('#DataTable tbody').append(rows);
        });
  
}

below jquery code added into document.ready to bring togle tooltip

 $('.delete-icon').tooltip({
        delay: 500,
        placement: "bottom",
        title: "testing",
        html: true
    }); 


    $('body').on('mouseenter', '#FiscalPeriodDataTable', function () {
       
        if ($(this).attr('data-toggle') != 'popover') {
            console.log('calling12');
            $(this).popover({
                container: 'body',
                placement: 'left',
                trigger: 'hover'
            }).popover('show');
        }
    });

Answer 1

Update again...

I finally get what the problem is in your code...

You just want a tooltip but you use data-toggle="collapse".... so it won't work~~~~

So change it to data-toggle="tooltip", add title="what you want to show", finally use $('[data-toggle="tooltip"]').tooltip() to enable tooltip functions.

Tooltip