Tooltip preventOverflow option

[Ste35]

Tooltip preventOverflow option

[Nness]

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.

ng-bootstrap/src/util/positioning.ts

Lines 88 to 173 in b5d5feb

	export function getPopperOptions({ placement, baseClass }: PositioningOptions, rtl: NgbRTL): Partial<Options> {
	let placementVals: Array<Placement> = Array.isArray(placement)
	? placement
	: (placement.split(placementSeparator) as Array<Placement>);
	// No need to consider left and right here, as start and end are enough, and it is used for 'auto' placement only
	const allowedPlacements = [
	'top',
	'bottom',
	'start',
	'end',
	'top-start',
	'top-end',
	'bottom-start',
	'bottom-end',
	'start-top',
	'start-bottom',
	'end-top',
	'end-bottom',
	];
	// replace auto placement with other placements
	let hasAuto = placementVals.findIndex((val) => val === 'auto');
	if (hasAuto >= 0) {
	allowedPlacements.forEach(function (obj) {
	if (placementVals.find((val) => val.search('^' + obj) !== -1) == null) {
	placementVals.splice(hasAuto++, 1, obj as Placement);
	}
	});
	}
	const popperPlacements = placementVals.map((_placement) => {
	return getPopperClassPlacement(_placement, rtl.isRTL());
	});
	let mainPlacement = popperPlacements.shift();
	const bsModifier: Partial<Modifier<any, any>> = {
	name: 'bootstrapClasses',
	enabled: !!baseClass,
	phase: 'write',
	fn({ state }) {
	const bsClassRegExp = new RegExp(baseClass + '(-[a-z]+)*', 'gi');
	const popperElement: HTMLElement = state.elements.popper as HTMLElement;
	const popperPlacement = state.placement;
	let className = popperElement.className;
	// Remove old bootstrap classes
	className = className.replace(bsClassRegExp, '');
	// Add current placements
	className += ` ${getBootstrapBaseClassPlacement(baseClass!, popperPlacement)}`;
	// Remove multiple spaces
	className = className.trim().replace(spacesRegExp, ' ');
	// Reassign
	popperElement.className = className;
	},
	};
	return {
	placement: mainPlacement,
	modifiers: [
	bsModifier,
	flip,
	preventOverflow,
	arrow,
	{
	enabled: true,
	name: 'flip',
	options: {
	fallbackPlacements: popperPlacements,
	},
	},
	{
	enabled: true,
	name: 'preventOverflow',
	phase: 'main',
	fn: function () {},
	},
	],
	};
	}

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.