Bootstrap tooltip with wrong position inside a .table-responsive

Operating system: Ubuntu 20.04.2 LTS Browser: Firefox 87.0 Reduced test case: https://jsfiddle.net/3r9z1o84/

I’m having a problem while using Bootstrap tooltips inside a parent with overflow: auto, more specifically inside a .table-responsive div. Both buttons are inside a <td> and have data-bs-placement="top", so the tooltip should be placed in the top of them, not anywhere else.

This is what is happening:

This is the expected behavior (when overflow-x is removed):

[rohit2sharma95]

Okay, this is not an issue. Instead a feature of Popper. 🙂 By default, the boundary for the flip modifier is clippingParents, so Tooltip gets flipped. If you want to prevent this behavior you need to change the boundary in the flip modifier using the popperConfig.

{
  name: 'flip',
  options: {
    altBoundary: true,
    boundary: document.body,
    fallbackPlacements: ['top', 'right', 'bottom', 'left']
  }
}

PS: You can not use the boundary option provided by bootstrap since it is used for the preventOverflow modifier only.

[jasonlewis]

@pbuttelli I had success with the following popperConfig.

popperConfig: function (config) {
  const flip = config.modifiers.find(({ name }) => name === 'flip')

  flip.options = {
    ...flip.options,
    boundary: 'window'
  }

  return config
}