@atlaskit/editor-plugin-emoji 13.1.11 → 13.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-emoji
 
+## 13.2.0
+
+### Minor Changes
+
+- [`a86fac88f3a5e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a86fac88f3a5e) -
+  Use lazy-loaded VanillaTooltip for emoji tooltips in the editor and render an ADS Tooltip
+  positioned above the emoji in the emoji element, gated behind the
+  platform_editor_emoji_hover_show_tooltip experiment.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.1.11
 
 ### Patch Changes

package/dist/cjs/nodeviews/EmojiNodeView.js

@@ -11,11 +11,14 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bindEventListener = require("bind-event-listener");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
 var _browserApis = require("@atlaskit/browser-apis");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _vanillaTooltip = require("@atlaskit/editor-common/vanilla-tooltip");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _emojiIdToEmoji = require("@atlaskit/emoji/emoji-id-to-emoji");
@@ -43,6 +46,7 @@ function isSingleEmoji(fallbackText) {
 /**
  * Emoji node view for renderering emoji nodes
  */
+var EMOJI_TOOLTIP_CLASS = 'emoji-tooltip-editor';
 var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
   /**
    * Prosemirror node view for rendering emoji nodes. This class is responsible for
@@ -64,7 +68,11 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
       emojiNodeDataProvider = _ref.emojiNodeDataProvider;
     (0, _classCallCheck2.default)(this, EmojiNodeView);
     (0, _defineProperty2.default)(this, "renderingFallback", false);
-    (0, _defineProperty2.default)(this, "destroy", function () {});
+    (0, _defineProperty2.default)(this, "destroy", function () {
+      if (_this.tooltipInstance || _this.tooltipTarget || _this.destroyLazyTooltipListeners) {
+        _this.destroyTooltip();
+      }
+    });
     this.node = node;
     this.intl = intl;
     var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _emojiNodeSpec.emojiToDom)(this.node)),
@@ -138,12 +146,25 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
       this.destroy = function () {
         unsubscribe();
         subscribeToConnection === null || subscribeToConnection === void 0 || subscribeToConnection();
+        _this.destroyTooltip();
       };
     }
   }
 
   /** Type guard to check if a Node is an HTMLElement in a safe way. */
   return (0, _createClass2.default)(EmojiNodeView, [{
+    key: "destroyTooltip",
+    value: function destroyTooltip() {
+      var _this$destroyLazyTool, _this$tooltipInstance, _this$tooltipTarget, _this$tooltipTarget2;
+      (_this$destroyLazyTool = this.destroyLazyTooltipListeners) === null || _this$destroyLazyTool === void 0 || _this$destroyLazyTool.call(this);
+      (_this$tooltipInstance = this.tooltipInstance) === null || _this$tooltipInstance === void 0 || _this$tooltipInstance.destroy();
+      (_this$tooltipTarget = this.tooltipTarget) === null || _this$tooltipTarget === void 0 || _this$tooltipTarget.removeAttribute('popovertarget');
+      (_this$tooltipTarget2 = this.tooltipTarget) === null || _this$tooltipTarget2 === void 0 || _this$tooltipTarget2.removeAttribute('aria-describedby');
+      this.destroyLazyTooltipListeners = undefined;
+      this.tooltipInstance = undefined;
+      this.tooltipTarget = undefined;
+    }
+  }, {
     key: "isHTMLElement",
     value: function isHTMLElement(element) {
       if (element === null) {
@@ -216,6 +237,8 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
     // Pay attention, this method should be called only when the emoji provider returns
     // emoji data to prevent rendering empty emoji during loading.
     function cleanUpAndRenderCommonAttributes() {
+      this.destroyTooltip();
+
       // Clean up the DOM before rendering the new emoji
       if (this.domElement) {
         this.domElement.innerHTML = '';
@@ -225,6 +248,83 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
         this.domElement.removeAttribute('aria-busy');
       }
     }
+
+    /**
+     * Lazily creates a VanillaTooltip on the given element showing the emoji shortName.
+     * Gated behind the platform_editor_emoji_hover_show_tooltip experiment.
+     * When the tooltip is active, the native `title` attribute is removed to avoid
+     * showing both the browser tooltip and the custom tooltip.
+     */
+  }, {
+    key: "createTooltip",
+    value: function createTooltip(element, shortName) {
+      var _this2 = this;
+      if (!(0, _expValEquals.expValEquals)('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
+        return;
+      }
+      if ((0, _coreUtils.isSSR)()) {
+        return;
+      }
+      var initTooltip = function initTooltip(event) {
+        var _this2$destroyLazyToo;
+        (_this2$destroyLazyToo = _this2.destroyLazyTooltipListeners) === null || _this2$destroyLazyToo === void 0 || _this2$destroyLazyToo.call(_this2);
+        _this2.destroyLazyTooltipListeners = undefined;
+        var tooltipId = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "emoji-tooltip-".concat(crypto.randomUUID()) : (0, _uniqueId.default)('emoji-tooltip-');
+        try {
+          var tooltipInstance = new _vanillaTooltip.VanillaTooltip(
+          // VanillaTooltip types expect HTMLButtonElement but works with any HTMLElement
+          element, shortName, tooltipId, EMOJI_TOOLTIP_CLASS,
+          // default timeout
+          300,
+          // Inline styles are required because the Popover API promotes the tooltip
+          // to the browser's top layer, where ancestor CSS selectors cannot reach it.
+          {
+            boxSizing: 'border-box',
+            maxWidth: '240px',
+            backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
+            border: 'none',
+            borderRadius: "var(--ds-radius-small, 3px)",
+            color: "var(--ds-text-inverse, #FFFFFF)",
+            font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+            fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+            insetBlockStart: "var(--ds-space-0, 0px)",
+            insetInlineStart: "var(--ds-space-0, 0px)",
+            overflowWrap: 'break-word',
+            paddingBlockStart: "var(--ds-space-050, 4px)",
+            paddingBlockEnd: "var(--ds-space-050, 4px)",
+            paddingInlineEnd: "var(--ds-space-075, 6px)",
+            paddingInlineStart: "var(--ds-space-075, 6px)",
+            whiteSpace: 'normal'
+          });
+          _this2.tooltipInstance = tooltipInstance;
+          _this2.tooltipTarget = element;
+          element.removeAttribute('title');
+          element.dispatchEvent(new Event(event.type));
+        } catch (error) {
+          element.removeAttribute('popovertarget');
+          element.removeAttribute('aria-describedby');
+          EmojiNodeView.logError(error instanceof Error ? error : new Error(String(error)));
+        }
+      };
+      var unbindMouseEnter = (0, _bindEventListener.bind)(element, {
+        type: 'mouseenter',
+        listener: initTooltip,
+        options: {
+          once: true
+        }
+      });
+      var unbindFocus = (0, _bindEventListener.bind)(element, {
+        type: 'focus',
+        listener: initTooltip,
+        options: {
+          once: true
+        }
+      });
+      this.destroyLazyTooltipListeners = function () {
+        unbindMouseEnter();
+        unbindFocus();
+      };
+    }
   }, {
     key: "renderFallback",
     value: function renderFallback() {
@@ -254,6 +354,7 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
       fallbackElement.setAttribute('data-testid', "fallback-emoji-".concat(shortName));
       fallbackElement.setAttribute('data-emoji-type', 'fallback');
       this.dom.appendChild(fallbackElement);
+      this.createTooltip(fallbackElement, shortName);
     }
   }, {
     key: "renderEmoji",
@@ -281,6 +382,7 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
       if (EmojiNodeView.shouldRecordUnicodeEmojiExposure(description, representation)) {
         (0, _expValEquals.expValEquals)('platform_use_unicode_emojis', 'isEnabled', true);
       }
+      this.createTooltip(containerElement, description.shortName);
     }
   }, {
     key: "createUnicodeEmojiElement",
@@ -330,7 +432,7 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
   }, {
     key: "createImageEmojiElement",
     value: function createImageEmojiElement(emojiDescription, representation) {
-      var _this2 = this;
+      var _this3 = this;
       var doc = (0, _browserApis.getDocument)();
       if (!doc) {
         // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
@@ -349,13 +451,13 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
           // If there's an error (ie. offline) render the ascii fallback if possible, otherwise
           // mark the node to refresh when returning online.
           // Create a check that confirms if this.node.attrs.text if an ascii emoji
-          if (isSingleEmoji(_this2.node.attrs.text)) {
-            _this2.renderFallback();
+          if (isSingleEmoji(_this3.node.attrs.text)) {
+            _this3.renderFallback();
           } else {
-            _this2.renderingFallback = true;
+            _this3.renderingFallback = true;
           }
         } else {
-          _this2.renderFallback();
+          _this3.renderFallback();
         }
       };
       return imageElement;

package/dist/es2019/nodeviews/EmojiNodeView.js

@@ -1,9 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { bind } from 'bind-event-listener';
 import isEqual from 'lodash/isEqual';
+import uniqueId from 'lodash/uniqueId';
 import { getDocument } from '@atlaskit/browser-apis';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
 import { logException } from '@atlaskit/editor-common/monitoring';
+import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { emojiIdToEmoji } from '@atlaskit/emoji/emoji-id-to-emoji';
@@ -31,7 +34,18 @@ export function isSingleEmoji(fallbackText) {
 /**
  * Emoji node view for renderering emoji nodes
  */
+const EMOJI_TOOLTIP_CLASS = 'emoji-tooltip-editor';
 export class EmojiNodeView {
+  destroyTooltip() {
+    var _this$destroyLazyTool, _this$tooltipInstance, _this$tooltipTarget, _this$tooltipTarget2;
+    (_this$destroyLazyTool = this.destroyLazyTooltipListeners) === null || _this$destroyLazyTool === void 0 ? void 0 : _this$destroyLazyTool.call(this);
+    (_this$tooltipInstance = this.tooltipInstance) === null || _this$tooltipInstance === void 0 ? void 0 : _this$tooltipInstance.destroy();
+    (_this$tooltipTarget = this.tooltipTarget) === null || _this$tooltipTarget === void 0 ? void 0 : _this$tooltipTarget.removeAttribute('popovertarget');
+    (_this$tooltipTarget2 = this.tooltipTarget) === null || _this$tooltipTarget2 === void 0 ? void 0 : _this$tooltipTarget2.removeAttribute('aria-describedby');
+    this.destroyLazyTooltipListeners = undefined;
+    this.tooltipInstance = undefined;
+    this.tooltipTarget = undefined;
+  }
   static logError(error) {
     void logException(error, {
       location: 'editor-plugin-emoji/EmojiNodeView'
@@ -57,7 +71,11 @@ export class EmojiNodeView {
     emojiNodeDataProvider
   }) {
     _defineProperty(this, "renderingFallback", false);
-    _defineProperty(this, "destroy", () => {});
+    _defineProperty(this, "destroy", () => {
+      if (this.tooltipInstance || this.tooltipTarget || this.destroyLazyTooltipListeners) {
+        this.destroyTooltip();
+      }
+    });
     this.node = node;
     this.intl = intl;
     const {
@@ -134,6 +152,7 @@ export class EmojiNodeView {
       this.destroy = () => {
         unsubscribe();
         subscribeToConnection === null || subscribeToConnection === void 0 ? void 0 : subscribeToConnection();
+        this.destroyTooltip();
       };
     }
   }
@@ -189,6 +208,8 @@ export class EmojiNodeView {
   // Pay attention, this method should be called only when the emoji provider returns
   // emoji data to prevent rendering empty emoji during loading.
   cleanUpAndRenderCommonAttributes() {
+    this.destroyTooltip();
+
     // Clean up the DOM before rendering the new emoji
     if (this.domElement) {
       this.domElement.innerHTML = '';
@@ -198,6 +219,80 @@ export class EmojiNodeView {
       this.domElement.removeAttribute('aria-busy');
     }
   }
+
+  /**
+   * Lazily creates a VanillaTooltip on the given element showing the emoji shortName.
+   * Gated behind the platform_editor_emoji_hover_show_tooltip experiment.
+   * When the tooltip is active, the native `title` attribute is removed to avoid
+   * showing both the browser tooltip and the custom tooltip.
+   */
+  createTooltip(element, shortName) {
+    if (!expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
+      return;
+    }
+    if (isSSR()) {
+      return;
+    }
+    const initTooltip = event => {
+      var _this$destroyLazyTool2;
+      (_this$destroyLazyTool2 = this.destroyLazyTooltipListeners) === null || _this$destroyLazyTool2 === void 0 ? void 0 : _this$destroyLazyTool2.call(this);
+      this.destroyLazyTooltipListeners = undefined;
+      const tooltipId = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? `emoji-tooltip-${crypto.randomUUID()}` : uniqueId('emoji-tooltip-');
+      try {
+        const tooltipInstance = new VanillaTooltip(
+        // VanillaTooltip types expect HTMLButtonElement but works with any HTMLElement
+        element, shortName, tooltipId, EMOJI_TOOLTIP_CLASS,
+        // default timeout
+        300,
+        // Inline styles are required because the Popover API promotes the tooltip
+        // to the browser's top layer, where ancestor CSS selectors cannot reach it.
+        {
+          boxSizing: 'border-box',
+          maxWidth: '240px',
+          backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
+          border: 'none',
+          borderRadius: "var(--ds-radius-small, 3px)",
+          color: "var(--ds-text-inverse, #FFFFFF)",
+          font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+          fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+          insetBlockStart: "var(--ds-space-0, 0px)",
+          insetInlineStart: "var(--ds-space-0, 0px)",
+          overflowWrap: 'break-word',
+          paddingBlockStart: "var(--ds-space-050, 4px)",
+          paddingBlockEnd: "var(--ds-space-050, 4px)",
+          paddingInlineEnd: "var(--ds-space-075, 6px)",
+          paddingInlineStart: "var(--ds-space-075, 6px)",
+          whiteSpace: 'normal'
+        });
+        this.tooltipInstance = tooltipInstance;
+        this.tooltipTarget = element;
+        element.removeAttribute('title');
+        element.dispatchEvent(new Event(event.type));
+      } catch (error) {
+        element.removeAttribute('popovertarget');
+        element.removeAttribute('aria-describedby');
+        EmojiNodeView.logError(error instanceof Error ? error : new Error(String(error)));
+      }
+    };
+    const unbindMouseEnter = bind(element, {
+      type: 'mouseenter',
+      listener: initTooltip,
+      options: {
+        once: true
+      }
+    });
+    const unbindFocus = bind(element, {
+      type: 'focus',
+      listener: initTooltip,
+      options: {
+        once: true
+      }
+    });
+    this.destroyLazyTooltipListeners = () => {
+      unbindMouseEnter();
+      unbindFocus();
+    };
+  }
   renderFallback() {
     this.renderingFallback = true;
     this.cleanUpAndRenderCommonAttributes();
@@ -226,6 +321,7 @@ export class EmojiNodeView {
     fallbackElement.setAttribute('data-testid', `fallback-emoji-${shortName}`);
     fallbackElement.setAttribute('data-emoji-type', 'fallback');
     this.dom.appendChild(fallbackElement);
+    this.createTooltip(fallbackElement, shortName);
   }
   renderEmoji(description, representation) {
     this.renderingFallback = false;
@@ -251,6 +347,7 @@ export class EmojiNodeView {
     if (EmojiNodeView.shouldRecordUnicodeEmojiExposure(description, representation)) {
       expValEquals('platform_use_unicode_emojis', 'isEnabled', true);
     }
+    this.createTooltip(containerElement, description.shortName);
   }
   createUnicodeEmojiElement(emoji) {
     let doc = getDocument();

package/dist/esm/nodeviews/EmojiNodeView.js

@@ -3,11 +3,14 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { bind } from 'bind-event-listener';
 import isEqual from 'lodash/isEqual';
+import uniqueId from 'lodash/uniqueId';
 import { getDocument } from '@atlaskit/browser-apis';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
 import { logException } from '@atlaskit/editor-common/monitoring';
+import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { emojiIdToEmoji } from '@atlaskit/emoji/emoji-id-to-emoji';
@@ -35,6 +38,7 @@ export function isSingleEmoji(fallbackText) {
 /**
  * Emoji node view for renderering emoji nodes
  */
+var EMOJI_TOOLTIP_CLASS = 'emoji-tooltip-editor';
 export var EmojiNodeView = /*#__PURE__*/function () {
   /**
    * Prosemirror node view for rendering emoji nodes. This class is responsible for
@@ -56,7 +60,11 @@ export var EmojiNodeView = /*#__PURE__*/function () {
       emojiNodeDataProvider = _ref.emojiNodeDataProvider;
     _classCallCheck(this, EmojiNodeView);
     _defineProperty(this, "renderingFallback", false);
-    _defineProperty(this, "destroy", function () {});
+    _defineProperty(this, "destroy", function () {
+      if (_this.tooltipInstance || _this.tooltipTarget || _this.destroyLazyTooltipListeners) {
+        _this.destroyTooltip();
+      }
+    });
     this.node = node;
     this.intl = intl;
     var _DOMSerializer$render = DOMSerializer.renderSpec(document, emojiToDom(this.node)),
@@ -130,12 +138,25 @@ export var EmojiNodeView = /*#__PURE__*/function () {
       this.destroy = function () {
         unsubscribe();
         subscribeToConnection === null || subscribeToConnection === void 0 || subscribeToConnection();
+        _this.destroyTooltip();
       };
     }
   }
 
   /** Type guard to check if a Node is an HTMLElement in a safe way. */
   return _createClass(EmojiNodeView, [{
+    key: "destroyTooltip",
+    value: function destroyTooltip() {
+      var _this$destroyLazyTool, _this$tooltipInstance, _this$tooltipTarget, _this$tooltipTarget2;
+      (_this$destroyLazyTool = this.destroyLazyTooltipListeners) === null || _this$destroyLazyTool === void 0 || _this$destroyLazyTool.call(this);
+      (_this$tooltipInstance = this.tooltipInstance) === null || _this$tooltipInstance === void 0 || _this$tooltipInstance.destroy();
+      (_this$tooltipTarget = this.tooltipTarget) === null || _this$tooltipTarget === void 0 || _this$tooltipTarget.removeAttribute('popovertarget');
+      (_this$tooltipTarget2 = this.tooltipTarget) === null || _this$tooltipTarget2 === void 0 || _this$tooltipTarget2.removeAttribute('aria-describedby');
+      this.destroyLazyTooltipListeners = undefined;
+      this.tooltipInstance = undefined;
+      this.tooltipTarget = undefined;
+    }
+  }, {
     key: "isHTMLElement",
     value: function isHTMLElement(element) {
       if (element === null) {
@@ -208,6 +229,8 @@ export var EmojiNodeView = /*#__PURE__*/function () {
     // Pay attention, this method should be called only when the emoji provider returns
     // emoji data to prevent rendering empty emoji during loading.
     function cleanUpAndRenderCommonAttributes() {
+      this.destroyTooltip();
+
       // Clean up the DOM before rendering the new emoji
       if (this.domElement) {
         this.domElement.innerHTML = '';
@@ -217,6 +240,83 @@ export var EmojiNodeView = /*#__PURE__*/function () {
         this.domElement.removeAttribute('aria-busy');
       }
     }
+
+    /**
+     * Lazily creates a VanillaTooltip on the given element showing the emoji shortName.
+     * Gated behind the platform_editor_emoji_hover_show_tooltip experiment.
+     * When the tooltip is active, the native `title` attribute is removed to avoid
+     * showing both the browser tooltip and the custom tooltip.
+     */
+  }, {
+    key: "createTooltip",
+    value: function createTooltip(element, shortName) {
+      var _this2 = this;
+      if (!expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
+        return;
+      }
+      if (isSSR()) {
+        return;
+      }
+      var initTooltip = function initTooltip(event) {
+        var _this2$destroyLazyToo;
+        (_this2$destroyLazyToo = _this2.destroyLazyTooltipListeners) === null || _this2$destroyLazyToo === void 0 || _this2$destroyLazyToo.call(_this2);
+        _this2.destroyLazyTooltipListeners = undefined;
+        var tooltipId = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "emoji-tooltip-".concat(crypto.randomUUID()) : uniqueId('emoji-tooltip-');
+        try {
+          var tooltipInstance = new VanillaTooltip(
+          // VanillaTooltip types expect HTMLButtonElement but works with any HTMLElement
+          element, shortName, tooltipId, EMOJI_TOOLTIP_CLASS,
+          // default timeout
+          300,
+          // Inline styles are required because the Popover API promotes the tooltip
+          // to the browser's top layer, where ancestor CSS selectors cannot reach it.
+          {
+            boxSizing: 'border-box',
+            maxWidth: '240px',
+            backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
+            border: 'none',
+            borderRadius: "var(--ds-radius-small, 3px)",
+            color: "var(--ds-text-inverse, #FFFFFF)",
+            font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+            fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+            insetBlockStart: "var(--ds-space-0, 0px)",
+            insetInlineStart: "var(--ds-space-0, 0px)",
+            overflowWrap: 'break-word',
+            paddingBlockStart: "var(--ds-space-050, 4px)",
+            paddingBlockEnd: "var(--ds-space-050, 4px)",
+            paddingInlineEnd: "var(--ds-space-075, 6px)",
+            paddingInlineStart: "var(--ds-space-075, 6px)",
+            whiteSpace: 'normal'
+          });
+          _this2.tooltipInstance = tooltipInstance;
+          _this2.tooltipTarget = element;
+          element.removeAttribute('title');
+          element.dispatchEvent(new Event(event.type));
+        } catch (error) {
+          element.removeAttribute('popovertarget');
+          element.removeAttribute('aria-describedby');
+          EmojiNodeView.logError(error instanceof Error ? error : new Error(String(error)));
+        }
+      };
+      var unbindMouseEnter = bind(element, {
+        type: 'mouseenter',
+        listener: initTooltip,
+        options: {
+          once: true
+        }
+      });
+      var unbindFocus = bind(element, {
+        type: 'focus',
+        listener: initTooltip,
+        options: {
+          once: true
+        }
+      });
+      this.destroyLazyTooltipListeners = function () {
+        unbindMouseEnter();
+        unbindFocus();
+      };
+    }
   }, {
     key: "renderFallback",
     value: function renderFallback() {
@@ -246,6 +346,7 @@ export var EmojiNodeView = /*#__PURE__*/function () {
       fallbackElement.setAttribute('data-testid', "fallback-emoji-".concat(shortName));
       fallbackElement.setAttribute('data-emoji-type', 'fallback');
       this.dom.appendChild(fallbackElement);
+      this.createTooltip(fallbackElement, shortName);
     }
   }, {
     key: "renderEmoji",
@@ -273,6 +374,7 @@ export var EmojiNodeView = /*#__PURE__*/function () {
       if (EmojiNodeView.shouldRecordUnicodeEmojiExposure(description, representation)) {
         expValEquals('platform_use_unicode_emojis', 'isEnabled', true);
       }
+      this.createTooltip(containerElement, description.shortName);
     }
   }, {
     key: "createUnicodeEmojiElement",
@@ -322,7 +424,7 @@ export var EmojiNodeView = /*#__PURE__*/function () {
   }, {
     key: "createImageEmojiElement",
     value: function createImageEmojiElement(emojiDescription, representation) {
-      var _this2 = this;
+      var _this3 = this;
       var doc = getDocument();
       if (!doc) {
         // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
@@ -341,13 +443,13 @@ export var EmojiNodeView = /*#__PURE__*/function () {
           // If there's an error (ie. offline) render the ascii fallback if possible, otherwise
           // mark the node to refresh when returning online.
           // Create a check that confirms if this.node.attrs.text if an ascii emoji
-          if (isSingleEmoji(_this2.node.attrs.text)) {
-            _this2.renderFallback();
+          if (isSingleEmoji(_this3.node.attrs.text)) {
+            _this3.renderFallback();
           } else {
-            _this2.renderingFallback = true;
+            _this3.renderingFallback = true;
           }
         } else {
-          _this2.renderFallback();
+          _this3.renderFallback();
         }
       };
       return imageElement;

package/dist/types/nodeviews/EmojiNodeView.d.ts

@@ -18,16 +18,17 @@ interface Params {
  * isSingleEmoji('😀') // true
  */
 export declare function isSingleEmoji(fallbackText: string): boolean;
-/**
- * Emoji node view for renderering emoji nodes
- */
 export declare class EmojiNodeView implements NodeView {
     dom: Node;
     domElement: HTMLElement | undefined;
     private readonly node;
     private readonly intl;
     private renderingFallback;
+    private tooltipInstance;
+    private tooltipTarget;
+    private destroyLazyTooltipListeners;
     readonly destroy: () => void;
+    private destroyTooltip;
     private static logError;
     /**
      * Prosemirror node view for rendering emoji nodes. This class is responsible for
@@ -49,6 +50,13 @@ export declare class EmojiNodeView implements NodeView {
     private static isEmojiRepresentationSupported;
     private static shouldRecordUnicodeEmojiExposure;
     private cleanUpAndRenderCommonAttributes;
+    /**
+     * Lazily creates a VanillaTooltip on the given element showing the emoji shortName.
+     * Gated behind the platform_editor_emoji_hover_show_tooltip experiment.
+     * When the tooltip is active, the native `title` attribute is removed to avoid
+     * showing both the browser tooltip and the custom tooltip.
+     */
+    private createTooltip;
     private renderFallback;
     private renderEmoji;
     private createUnicodeEmojiElement;

package/dist/types/pm-plugins/providers/EmojiNodeDataProvider.d.ts

@@ -4,7 +4,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EmojiResource, OptionalEmojiDescriptionWithVariations } from '@atlaskit/emoji';
 import { NodeDataProvider } from '@atlaskit/node-data-provider';
 export declare class EmojiNodeDataProvider extends NodeDataProvider<EmojiDefinition, OptionalEmojiDescriptionWithVariations> {
-    name: "emojiNodeDataProvider";
+    name: 'emojiNodeDataProvider';
     private readonly emojiResource;
     private readonly emojiProvider;
     constructor(resource: EmojiResource);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-emoji",
-	"version": "13.1.11",
+	"version": "13.2.0",
 	"description": "Emoji plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,20 +32,21 @@
 		"@atlaskit/editor-plugin-type-ahead": "^13.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
-		"@atlaskit/emoji": "^71.13.0",
+		"@atlaskit/emoji": "^71.14.0",
 		"@atlaskit/icon": "^37.2.0",
 		"@atlaskit/node-data-provider": "^13.0.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/prosemirror-input-rules": "^4.0.0",
-		"@atlaskit/tmp-editor-statsig": "^134.0.0",
+		"@atlaskit/tmp-editor-statsig": "^135.0.0",
 		"@atlaskit/tokens": "^16.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
+		"bind-event-listener": "^3.0.0",
 		"lodash": "^4.17.21",
 		"react-loadable": "^5.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.40.0",
+		"@atlaskit/editor-common": "^116.41.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"