From d935499809c01aa2c90a3b98621c4ad1a7ddac71 Mon Sep 17 00:00:00 2001
From: Aryan Jassal <aryanjassal.au@gmail.com>
Date: Thu, 5 Mar 2026 13:50:00 +1100
Subject: [PATCH] Emojis now show popup shortcode

---
 src/app/plugins/react-custom-html-parser.tsx | 44 ++++++++++++++++----
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/app/plugins/react-custom-html-parser.tsx b/src/app/plugins/react-custom-html-parser.tsx
index ba40c97876..ba1bf94b41 100644
--- a/src/app/plugins/react-custom-html-parser.tsx
+++ b/src/app/plugins/react-custom-html-parser.tsx
@@ -16,7 +16,20 @@ import {
 } from 'html-react-parser';
 import { MatrixClient } from 'matrix-js-sdk';
 import classNames from 'classnames';
-import { Box, Chip, config, Header, Icon, IconButton, Icons, Scroll, Text, toRem } from 'folds';
+import {
+  Box,
+  Chip,
+  config,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Scroll,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  toRem,
+} from 'folds';
 import { IntermediateRepresentation, Opts as LinkifyOpts, OptFn } from 'linkifyjs';
 import Linkify from 'linkify-react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -169,13 +182,28 @@ export const scaleSystemEmoji = (text: string): (string | JSX.Element)[] =>
   findAndReplace(
     text,
     EMOJI_REG_G,
-    (match, pushIndex) => (
-      <span key={`scaleSystemEmoji-${pushIndex}`} className={css.EmoticonBase}>
-        <span className={css.Emoticon()} title={getShortcodeFor(getHexcodeForEmoji(match[0]))}>
-          {match[0]}
-        </span>
-      </span>
-    ),
+    (match, pushIndex) => {
+      const shortcode = getShortcodeFor(getHexcodeForEmoji(match[0])) ?? 'unknown';
+      return (
+        <TooltipProvider
+          key={`scaleSystemEmoji-${pushIndex}`}
+          position="Top"
+          tooltip={
+            <Tooltip style={{ maxWidth: toRem(200) }}>
+              <Text size="T300">:{shortcode}:</Text>
+            </Tooltip>
+          }
+        >
+          {(targetRef) => (
+            <span className={css.EmoticonBase}>
+              <span ref={targetRef} className={css.Emoticon()}>
+                {match[0]}
+              </span>
+            </span>
+          )}
+        </TooltipProvider>
+      );
+    },
     (txt) => txt
   );