Data-original-title Do Not Work After Adding Element To The Page

I am again having problem with JavaScript, which I think is related to it being loaded before a related element is added to the page. Previously (my original question is here), it

Solution 1:

It might work by adding the tooltip() function to the end like so

/* ... */

                $('#displayCustomerResults').find('#tbl_Customers').DataTable({
                    "pagingType": "full_numbers",
                    "lengthMenu": [[6, 12, 24, -1],[6, 12, 24, "All"]],
                    responsive: true,
                    language: { search: "_INPUT_", searchPlaceholder: "Search records",}
                }).find("[data-toggle='tooltip']").tooltip();

/* ... */

Solution 2:

Firstly, kudos to @Christian for being of a great help.

Although, @Christian 's answer did not work, it made me thinking that he calls the tooltip() function, that is most likely a part of one of the libraries that have already been loaded.

So, instead of appending .find("[data-toggle='tooltip']").tooltip() to the end of the table formatting code, I have called tooltip() function in a separate statement, so the cone now looks like so:

    $('#displayCustomerResults').find('#tbl_Customers').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [[6, 12, 24, -1],[6, 12, 24, "All"]],
        responsive: true,
        language: { search: "_INPUT_", searchPlaceholder: "Search records",}
    });

    // following @Mohamed's advice I changed the original code to this
    $('#tbl_Customers').find('[data-toggle="tooltip"]').tooltip();

It now works like a charm.