Tooltip: overflows window boundaries

[iessa-pragg-ctct]

Describe the bug

The tooltip component 'edge detection' is not working in some positions, specifically when using the positions top and bottom and being near the edges of the screen.

Pull Request Link

#7072

Investigation

Partially investigated, seems to be related to some kind of external code that is doing edge detection. Have not had time to investigate further. Could not easily find the code in question.

primevue/packages/primevue/src/tooltip/Tooltip.js

Line 440 in 81a5df3

isOutOfBounds(el) {

The functions getOuterWidth and getOuterHeight are coming from some dom utils package that is not obvious to find.

Seems like the alignment for top & bottom are not taking X into account for bounds checking.

primevue/packages/primevue/src/tooltip/Tooltip.js

Lines 318 to 328 in 81a5df3

	if (modifiers.top) {
	this.alignTop(el);
	if (this.isOutOfBounds(el)) {
	this.alignBottom(el);
	if (this.isOutOfBounds(el)) {
	this.alignTop(el);
	}
	}
	} else if (modifiers.left) {

Reproducer

https://stackblitz.com/edit/vitejs-vite-gqcccukb

Environment

Windows 11

Vue version

3.5.13

PrimeVue version

4.2.5

Node version

18.20.3

Browser(s)

Chrome 131

Steps to reproduce the behavior

1. Add a tooltip to an element that is near the left/right side of the screen
2. Set the position of the tooltip to either top or bottom

Expected behavior

The tooltip remains fully on the screen regardless of the position of the target element.