Popover not working in Angular Datatables column header

jjiang5

I am trying to add info icon in datatable column header, I am using angular 11 and BS 4,

const helpIcon1 = '<i class="fa fa-info-circle blue-color" aria-hidden="true" title="Held Details" data-toggle="popover" data-content="description" />';

my DTOption = {

columns: [

{ data: 'heldInd', defaultContent: '', title: 'Held ' + helpIcon1,
className: 'non-numeric sortable cfs-cell-pointer', searchable: true, orderable: true, render: renderHeld }

]

But I got tooltip result , only got Title, no content displayed.

Could you help?

Thanks

Jin

colin

The content would be displayed by your function renderHeld - what's that doing?

Colin

jjiang5

Hi Colin,

Thanks for your response.

My popover is in datatable column header (th), but it only displays popover title "Held Details", no popover data content section, just like toolkit.

My datatable cell Held field displays correct value in each row from my function renderHeld.

function renderHeld(data: any, type: any, row: any, meta: any): string {
    // console.log('return renderHeld:', data);
    if (data === null || data === CfsConstants.CFS_N ) {
      return CfsConstants.CFS_NO;
    } else {
        return `<span class="fa"><img src="assets/img/HELD_v4.png"></span>`;
    }

}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

I think we need to see this. I'm not clear if you're saying there's a select in the header which is empty, or something else. If we can see it, we'll all be talking about the same thing. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin