Bootstrap popover on Fixed Column looks strange

curiou

I have an issue where I am trying to put popovers on the first column of a table that is fixed. The popovers look fine before you start to horizontally scroll (see test case below). Once you start scrolling, the popover starts to appear at the left edge of the table which looks strange. Any help would be appreciated.

I have tried a variety of solutions including using fixedColumns().relayout() and .popover('update) to refresh the location of the fixedcolumn and popover while scrolling but it's not working the way intended:

  $( table.table().container ).on('scroll', function() {
       setTimeout(function() { $.fn.dataTable
      .tables( { visible: true, api: true } )
      .columns.adjust()
      .fixedColumns().relayout();
      $('.pop').popover('update'); 
      },300)
  });

Using Bootstrap 4 and Popper.js.

Test case: http://live.datatables.net/zudapubo/1

Thank you

allan

I suspect it is related to Popover not taking into account the position of the scrolling container, combined with the fact that the fixed column is position: absolute. It is probably initially positioning the popover well to the left, outside the scroll zone and then doing a check to see if the position is to the left of the scroll start and if so, moving it to that point.

I'm afraid I think this is one for the Popover support folks.

Allan

curiou

Thank you Allan. For anyone with a similar issue, switch from popper.js v1 to popper.js v2 with tippy.js. Make sure you append your tippy instance to div.DFTC_LeftWrapper when using FixedColumn.