From bacbffd5c591f029d41accd90ca1262778abe419 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 27 Nov 2024 19:10:10 -0600
Subject: [PATCH] Add a tooltip to custom emoijs with their shortcode Ref:
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1790#note_2217120387

---
 src/utils/emojify.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/utils/emojify.tsx b/src/utils/emojify.tsx
index aba82f5b7..449e0a06a 100644
--- a/src/utils/emojify.tsx
+++ b/src/utils/emojify.tsx
@@ -1,3 +1,4 @@
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import { CustomEmoji } from 'soapbox/schemas/custom-emoji.ts';
 
 /** Given text and a list of custom emojis, return JSX with the emojis rendered as `<img>` elements. */
@@ -15,7 +16,11 @@ export function emojifyText(text: string, emojis: CustomEmoji[]): JSX.Element {
       const customEmoji = emojis.find((e) => e.shortcode === shortcode);
 
       if (customEmoji) {
-        parts.push(<img key={i} src={customEmoji.url} alt={shortcode} className='inline h-[1em] align-text-bottom' />);
+        parts.push(
+          <Tooltip key={i} text={`:${shortcode}:`}>
+            <img src={customEmoji.url} alt={shortcode} className='inline h-[1em] align-text-bottom' />
+          </Tooltip>,
+        );
       } else {
         parts.push(match);
       }