From f2cd6807d385b559e0668cfbacc046d5f9d3e81e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarz=C4=99bski?= <dumluregn@gmail.com>
Date: Fri, 18 Oct 2024 12:45:01 +0200
Subject: [PATCH] Change the matcher for instant tooltips from class to
 attribute.

---
 packages/ckeditor5-ui/src/tooltipmanager.ts     | 17 +++++++++++++----
 .../tests/tooltip/tooltipmanager.js             |  4 ++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/ckeditor5-ui/src/tooltipmanager.ts b/packages/ckeditor5-ui/src/tooltipmanager.ts
index f78fe6ef171..20e486a28ad 100644
--- a/packages/ckeditor5-ui/src/tooltipmanager.ts
+++ b/packages/ckeditor5-ui/src/tooltipmanager.ts
@@ -56,13 +56,21 @@ const BALLOON_CLASS = 'ck-tooltip';
  *
  * # Disabling tooltips
  *
- * In order to disable the tooltip  temporarily, use the `data-cke-tooltip-disabled` attribute:
+ * In order to disable the tooltip temporarily, use the `data-cke-tooltip-disabled` attribute:
  *
  * ```ts
  * domElement.dataset.ckeTooltipText = 'Disabled. For now.';
  * domElement.dataset.ckeTooltipDisabled = 'true';
  * ```
  *
+ * # Instant tooltips
+ *
+ * To remove the delay before showing or hiding the tooltip, use the `data-cke-tooltip-instant` attribute:
+ *
+ * ```ts
+ * domElement.dataset.ckeTooltipInstant = 'true';
+ * ```
+ *
  * # Styling tooltips
  *
  * By default, the tooltip has `.ck-tooltip` class and its text inner `.ck-tooltip__text`.
@@ -304,12 +312,12 @@ 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.
+		// Also, if the element has an attribute `data-cke-tooltip-instant`, 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 ( 
+		if (
 			evt.name === 'focus' && !elementWithTooltipAttribute.matches( ':hover' ) ||
-			elementWithTooltipAttribute.matches( '.ck-with-instant-tooltip' )
+			elementWithTooltipAttribute.matches( '[data-cke-tooltip-instant]' )
 		) {
 			this._pinTooltip( elementWithTooltipAttribute, getTooltipData( elementWithTooltipAttribute ) );
 		} else {
@@ -337,6 +345,7 @@ export default class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
 			// Do not hide the tooltip when the user moves the cursor over it.
 			if ( isEnteringBalloon ) {
 				this._unpinTooltipDebounced.cancel();
+
 				return;
 			}
 
diff --git a/packages/ckeditor5-ui/tests/tooltip/tooltipmanager.js b/packages/ckeditor5-ui/tests/tooltip/tooltipmanager.js
index 27bb81b6db4..711a56b74e8 100644
--- a/packages/ckeditor5-ui/tests/tooltip/tooltipmanager.js
+++ b/packages/ckeditor5-ui/tests/tooltip/tooltipmanager.js
@@ -306,8 +306,8 @@ 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' );
+				it( 'should pin a tooltip instantly if element has a `data-cke-tooltip-instant` attribute', () => {
+					elements.a.dataset.ckeTooltipInstant = true;
 
 					utils.dispatchMouseEnter( elements.a );