Bootstrap tooltip not working inside table

Hi I am using a function that I saw from one of your example which is to display action buttons. I am having a problem with the bootstrap tooltip working on these buttons.

Here is the JS:

function actionsFormatter(value, row, index) {
        if (row.id == 1 || row.id == 2) {
             return [
                '<a class="btn btn-primary btn-xs mr10" data-tooltip="true" data-placement="bottom" href="admin_permission.php?id='+row.id+'" title="Edit">',
                    '<i class="glyphicon glyphicon-pencil"></i>',
                '</a>',
                '<a class="btn btn-danger btn-xs disabled" data-tooltip="true" data-placement="bottom" href="#" title="Remove">',
                    '<i class="glyphicon glyphicon-trash"></i>',
                '</a>',
            ].join(''); 
        } else {
                return [
                    '<a class="btn btn-primary btn-xs mr10" data-tooltip="true" data-placement="bottom" href="admin_permission.php?id='+row.id+'" title="Edit">',
                        '<i class="glyphicon glyphicon-pencil"></i>',
                    '</a>',
                    '<a class="btn btn-danger btn-xs remove" data-tooltip="true" data-placement="bottom" href="#" title="Remove">',
                        '<i class="glyphicon glyphicon-trash"></i>',
                    '</a>',
                ].join('');
        }
    }
window.actionsEvents = {
        'click .remove': function (e, value, row, index) {
            // Open modal on click
            $('#deleteModal').modal();
            // Add permission names to modal
            $('#permission-name').text('Are you sure you want to delete: ' + row.name + '?');
            // Create a hidden input to use when submitting form
            var input = document.createElement("input");
            input.setAttribute('type', 'hidden');           
            input.setAttribute('name', 'delete['+row.id+']');
            input.setAttribute("id", 'delete['+row.id+']');            
            input.setAttribute('value', row.id);         
            //append to form element that you want .
            document.getElementById("deleteModalForm").appendChild(input);  

            console.log(value, row, index);
        }
    };

And the I have this to activate the tooltips:

$('[data-tooltip="true"]').tooltip({
        container: 'body'
    });

The tooltip works fine on the toolbar, but does not work for these buttons. Can you see why this doesn’t work? Here is a JSFiddle. Notice that the top let button has the bootstrap tooltip, but the action buttons in the table does not work.

[vletoux]

I had also the same problem but I don’t think is the best answer. I started as suggested to add code for the event post-body.bs.table but not all events were covered. Then I added the code suggested above with the click handler. But my tooltip is on a column (a question mark item) and when clicking on it, the tooltip does not disappear.

After some time, I think the best is to use the “selector” feature. See https://getbootstrap.com/docs/5.0/components/tooltips/#options

instead of adding data-bs-tooltip to tooltips, the best is to add a new class (like has-tooltip) and to use the following js:

new bootstrap.Tooltip(document.body, {
        selector: '.has-tooltip'
    });

Automatically created and destroyed tooltip are handled automatically. No additional code is needed.

[wenzhixin]

You need to active the tooltip after table body is rendered: http://jsfiddle.net/e3nk137y/791/.