Using Columns Render to display Bootstrap 5 Popover on hover
Using Columns Render to display Bootstrap 5 Popover on hover
I'm using render in the column definitions to show a span polygon "badge" for some rows. The badge is showing successfully. Now, I would like to display a BS5 popover when the user hovers over the badge.
columns = [
{ title: 'Status', data: 'statusRecurring' , orderable: false, type: 'string',
render: function (data: any, type: any, row: any) {
const fields = data.split(',');
// if its recurring, show the 'S&F' badge, otherwise just show status
if (fields != null) {
if (fields.length == 1) {
return type === 'display' || type === 'filter' ?
fields[0] :
data;
}
else {
return type === 'display'
? fields[0] + "<span class='recurring-badge-wrap'><span class='recurring-badge' data-bs-toggle='popover' data-bs-trigger='hover' title='Recurrence Info' data-bs-content='Recurrence details here'>" + fields[1] + "</span></span>"
: data;
}
}
}
},...
When I hover over it, I see the default tooltip with the title 'Recurrence Info'.
I can see the popover successfully elsewhere on the page (not in the datatable). To make it work, I had to initialize the Popover after the view was initialized, using this code:
//Bootstrap tooltip initialization
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
Am I missing something to make the BS5 Popover show within the row element of the datatable?
This question has an accepted answers - jump to answer
Answers
See if this example from this thread helps. It uses
drawCallback
to initialize the tooltips for the rows displayed on the page. You may need to do something similar.If you still need help please build a simple test case with what you are trying so we can hep debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
With bootstrap 4 this will work - Since Bootstrap 5 there is a render problem with tooltips
@Linde37 I updated the example I linked to with Bootstrap 5 and it seems to be working without any other changes:
https://live.datatables.net/miguroze/203/edit
However you may need to change from using
data-toggle
todata-bs-toggle
. See this SO thread.If you still have problems please post a link to your page or a test case replicating the issue so we can help debug.
Kevin