Fix tooltip clipped by viewport when toolbar is near page bottom

Fixes #1150

Author: xdan

CHANGELOG.md

@@ -20,6 +20,7 @@
 - Fix pasting table into table cell creating invalid nesting and trailing empty paragraph ([#1314](https://github.com/xdan/jodit/issues/1314))
 - Fix font size module misbehavior in pt mode: duplicated unit display, incorrect active state, and wrong px/pt conversion ([#1197](https://github.com/xdan/jodit/issues/1197))
 - Fix focus competition between multiple editor instances in Source mode ([#1313](https://github.com/xdan/jodit/issues/1313))
+- Fix tooltip clipped by viewport when toolbar is near the bottom of the page ([#1150](https://github.com/xdan/jodit/issues/1150))
 
 ## 4.11.7
 

src/core/ui/button/tooltip/tooltip.less

@@ -53,3 +53,7 @@
 .jodit-ui-tooltip.jodit-ui-tooltip_visible_true {
 	opacity: 1;
 }
+
+.jodit-ui-tooltip.jodit-ui-tooltip_above_true {
+	transform: translate(-50%, calc(var(--padding-default) / -2));
+}

src/core/ui/button/tooltip/tooltip.test.js

@@ -263,6 +263,65 @@
 				});
 			});
 
+			describe('Viewport overflow', () => {
+				it('Should show tooltip above button when near viewport bottom', () => {
+					editor.destruct();
+
+					// Move the box to the very bottom of the viewport
+					box.style.position = 'fixed';
+					box.style.bottom = '0';
+					box.style.left = '0';
+					box.style.right = '0';
+					box.style.minHeight = '60px';
+					box.style.padding = '0';
+
+					editor = getJodit({
+						...OPTIONS,
+						toolbarAdaptive: false
+					});
+
+					const boldBtn = getButton('bold', editor);
+					expect(boldBtn).is.not.null;
+
+					// Mock viewport height to simulate overflow
+					const ow = editor.ownerWindow;
+					const originalInnerHeight = Object.getOwnPropertyDescriptor(
+						HTMLElement.prototype,
+						'clientHeight'
+					);
+					const btnRect =
+						boldBtn.parentElement.getBoundingClientRect();
+					// Set viewport height so tooltip will overflow below it
+					Object.defineProperty(ow, 'innerHeight', {
+						value: Math.round(btnRect.bottom + 5),
+						configurable: true,
+						writable: true
+					});
+
+					simulateEvent('mouseenter', boldBtn.parentElement);
+					timers.delay(100);
+
+					const tooltip = getTooltipElm();
+					expect(tooltip).is.not.null;
+					expect(tooltip.textContent).equals('Bold');
+
+					const tooltipRect = tooltip.getBoundingClientRect();
+
+					// Tooltip should be above the button, not below
+					expect(tooltipRect.bottom).is.below(btnRect.top + 1);
+
+					simulateEvent('mouseleave', boldBtn.parentElement);
+					timers.delay(100);
+
+					// Restore
+					delete ow.innerHeight;
+					box.style.position = '';
+					box.style.bottom = '';
+					box.style.left = '';
+					box.style.right = '';
+				});
+			});
+
 			describe('Inside popup', () => {
 				describe('Hiding popup', () => {
 					it('should hide it tooltip', () => {

src/core/ui/button/tooltip/tooltip.ts

@@ -190,13 +190,26 @@ export class UITooltip extends UIElement {
 
 	private __show(getPoint: () => IPoint, content: string): void {
 		this.setMod('visible', true);
+		this.setMod('above', false);
 		this.getElm('content')!.innerHTML = content;
 		const point = getPoint();
 
 		css(this.container, {
 			left: point.x,
 			top: point.y
 		});
+
+		const tooltipPos = position(this.container);
+		const viewHeight = this.j.ow.innerHeight;
+
+		// If tooltip overflows below viewport, show it above the target
+		if (tooltipPos.top + tooltipPos.height > viewHeight) {
+			const targetPos = position(this.__currentTarget!);
+			this.setMod('above', true);
+			css(this.container, {
+				top: targetPos.top - tooltipPos.height
+			});
+		}
 	}
 
 	@autobind