Tooltip preventOverflow option about ng-bootstrap HOT 2 OPEN

The report issue is also happen to dropdown and popover. From the code I can see preventOverflow has been added as default.

ng-bootstrap utilize popper lite, which popper lite doesn't include preventOverflow, where you have to import in to make it work. Which ng-bootstrap did.

bootstrap also has preventOverflow, but they use popper instead of popper lite.

https://github.com/twbs/bootstrap/blob/24cc552343c817b0d13201639c635a778d55da09/js/src/tooltip.js#L399-L437

Personally, this has been struggling me for a while as well.

from ng-bootstrap.

I have found out the issue. The following code cause preventOverflow to not functional. The goal of the code was suppose to provide additional option and to be merged with popper's preventOverflow modifier. But it actually setup fn.

If we compare the option bootstrap has added and ng-bootstrap's code.

// bootstrap
{
   name: 'preventOverflow',
   options: {
      boundary: this._config.boundary
   }
}

// ng-bootstrap
{
  enabled: true,
  name: 'preventOverflow',
  phase: 'main',
  fn: function () {},
}

If we either remove ng-bootstrap's modifier or swap with bootstrap's modifier. In both case works.

Following is popperOptions function I use to debug ng-bootstrap. The logic is to check how many preventOverflow has been added. If more than one, remove last one. @Ste35 you can give it a try.

  
  popperOptions(options: Partial<Options>): Partial<Options> {
    const target = options.modifiers?.filter(m => m.name === 'preventOverflow');
    if (!target || target.length <= 1) {
      return options;
    }

    const last = target.at(-1);
    if (options.modifiers && last) {
      options.modifiers = options.modifiers.filter(m => m !== last);
    }

    console.log('popper options', options);

    return options;
  }

@maxokorokov The second preventOverflow that ng-bootstrap added, I feels not necessary. Bootstrap use it to setup boundary, where ng-bootstrap setup nothing. We can potentially remove it.

from ng-bootstrap.