From c87e63bb0f06aec329e7cefa57804d5c98227966 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dariusz=20Jarz=C4=99bski?= Date: Fri, 11 Oct 2024 21:13:14 +0200 Subject: [PATCH] Add unit test and docs. --- packages/ckeditor5-ui/src/tooltipmanager.ts | 6 ++++-- .../ckeditor5-ui/tests/tooltip/tooltipmanager.js | 12 ++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/ckeditor5-ui/src/tooltipmanager.ts b/packages/ckeditor5-ui/src/tooltipmanager.ts index 9abdaaee5ff..ba7e8c0c81a 100644 --- a/packages/ckeditor5-ui/src/tooltipmanager.ts +++ b/packages/ckeditor5-ui/src/tooltipmanager.ts @@ -304,6 +304,9 @@ export default class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() { // The tooltip should be pinned immediately when the element gets focused using keyboard. // If it is focused using the mouse, the tooltip should be pinned after a delay to prevent flashing. // See https://github.com/ckeditor/ckeditor5/issues/16383 + // Also, if the element has a class `ck-with-instant-tooltip`, the tooltip should be pinned immediately. + // This is useful for elements that have their content partially hidden (e.g. a long text in a small container) + // and should show a tooltip on hover, like merge field. if ( evt.name === 'focus' && !elementWithTooltipAttribute.matches( ':hover' ) || elementWithTooltipAttribute.matches( '.ck-with-instant-tooltip' ) ) { this._pinTooltip( elementWithTooltipAttribute, getTooltipData( elementWithTooltipAttribute ) ); @@ -361,10 +364,9 @@ export default class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() { return; } - this._pinTooltipDebounced.cancel(); - // Note that unpinning should happen whether the tooltip is already visible or not, for instance, it could be invisible but // queued (debounced): it should get canceled (e.g. quick focus then quick blur using the keyboard). + this._pinTooltipDebounced.cancel(); this._unpinTooltipDebounced(); } } diff --git a/packages/ckeditor5-ui/tests/tooltip/tooltipmanager.js b/packages/ckeditor5-ui/tests/tooltip/tooltipmanager.js index edac519dd7d..27bb81b6db4 100644 --- a/packages/ckeditor5-ui/tests/tooltip/tooltipmanager.js +++ b/packages/ckeditor5-ui/tests/tooltip/tooltipmanager.js @@ -306,6 +306,18 @@ describe( 'TooltipManager', () => { } ); } ); + it( 'should pin a tooltip instantly if element has a `ck-with-instant-tooltip` class', () => { + elements.a.classList.add( 'ck-with-instant-tooltip' ); + + utils.dispatchMouseEnter( elements.a ); + + sinon.assert.calledOnce( pinSpy ); + sinon.assert.calledWith( pinSpy, { + target: elements.a, + positions: sinon.match.array + } ); + } ); + it( 'should pin just a single tooltip (singleton)', async () => { const secondEditor = await ClassicTestEditor.create( element, { plugins: [ Paragraph, Bold, Italic ],