Using Columns Render to display Bootstrap 5 Popover on hover

Using Columns Render to display Bootstrap 5 Popover on hover

shaishandilshaishandil Posts: 1Questions: 1Answers: 0

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

Sign In or Register to comment.