Bootstrap tooltip not firing after page 1 of paginated results

u20241229

Sorry to ask the same question again, but I have spent a long while trying to answer this myself.

This is a test case replicating the issue:
https://live.datatables.net/pajodaba/1/edit

The issue is that when hovering over the link in the Name column, the Bootstrap tooltip appears.

The tooltip does not appear when clicking to view the results on pages 2 and 3.

I have searched to look for an answer, such as:

Bootstrap tooltip not rendered properly after paginating

Google search: "datatables" "tooltip" "pagination" "bootstrap"

I tried changing the code for the table to e.g.

const table = new DataTable('#data', {
    order: [],
    "pageLength": 5,
    layout: {
        topStart: {
            buttons: ['copy', 'csv', 'excel','colvis']
        }
    },
    "drawCallback": function( settings ) {
            $('[data-toggle="tooltip"]').tooltip();
    }
});

Or:

const table = new DataTable('#data', {
    order: [],
    "pageLength": 5,
    layout: {
        topStart: {
            buttons: ['copy', 'csv', 'excel','colvis']
        }
    },
    "fnDrawCallback": function() {
        $('[data-toggle="tooltip"]').tooltip();

    }
});

However I can't get it to work.

Sorry for asking basic questions.

If anyone has time to advise, please can I ask how I can solve this?

Thanks

Jim

kthorngren

Place the code you have to initialize the tooltips in drawCallback. Updated test case:
https://live.datatables.net/sepecuso/1/edit

The reason is the only elements available are the rows shown on the page so only those are initialized.

Kevin

u20241229

Thank you again for your fast and helpful reply.
Issue fixed!