Can't use tooltip for buttons inside datatables

Expected behavior using the render.mdb.datatable event to apply tooltip to my buttons

Actual behavior tooltip will appear for a second until user moves mouse, then once is it is hidden it will not appear until table is re-rendered (where tooltip will appear once again)

Resources (screenshots, code snippets etc.) code is inside a razor page (i.e @foreach to load row data)

        var tableData = {
            rows: [
            @foreach(var role in roles)
            {<text>
                {
                    id: @role.Id, name: '@role.Name', description: '@role.Description', permissionIds: '@role.PermissionIds',
                    buttons: `
<button class="btn btn-outline-secondary btn-sm btn-floating" data-mdb-toggle="tooltip" title="Assign Users" onclick="app.roles.setUserForm(@role.Id)"><i class="fad fa-user-plus"></i></button>` + (@role.Id === 1 ? '' :
`<button class="btn btn-outline-primary btn-sm btn-floating" data-mdb-toggle="tooltip" title="Edit Role" onclick="app.roles.setForm(@role.Id)"><i class="fad fa-cogs"></i></button>
 <button class="btn btn-outline-danger btn-sm btn-floating" data-mdb-toggle="tooltip" title="Delete" onclick="app.roles.delete(@role.Id)"><i class="fad fa-trash-alt"></i></button>`)
                },
            </text>}
            ],
            columns: [
                { label: '', field: 'id', format: function (cell, value) { $(cell).addClass('d-none') }},
                { label: 'Name', field: 'name' },
                { label: 'Description', field: 'description' },
                { label: 'Actions', field: 'buttons', sort: false, width: 100 },
                { label: '', field: 'permissionIds', format: function (cell, value) { $(cell).addClass('d-none') } },
            ]
        };
        const datatable = document.getElementById('roles-datatable');

        datatable.addEventListener('render.mdb.datatable', function () {
            $('[data-mdb-toggle="tooltip"]', datatable).each(function () {
                //tried alot of different combos to make this work...
                const tooltip = new mdb.Tooltip(this, {
                    trigger: 'hover',
                    boundary: 'window',
                    container: 'body'
                });
            });
        });
        const datatableInstance = new mdb.Datatable(datatable, tableData);
        $('i[data-mdb-sort="id"],i[data-mdb-sort="permissionIds"]', datatable).parent().hide();