[MM-55497] Add tooltips with enlarged emojis when hovering over emojis within message content (#26709)

* feat: add tooltip to emojis in post messages

* ci: eslint fix

webapp/channels/src/components/post_emoji/post_emoji.test.tsx

@@ -16,14 +16,14 @@ describe('PostEmoji', () => {
     test('should render image when imageUrl is provided', () => {
         render(<PostEmoji {...baseProps}/>);
 
-        expect(screen.getByTitle(':' + baseProps.name + ':')).toBeInTheDocument();
+        expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toBeInTheDocument();
-        expect(screen.getByTitle(':' + baseProps.name + ':')).toHaveStyle(`backgroundImage: url(${baseProps.imageUrl})}`);
+        expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toHaveStyle(`backgroundImage: url(${baseProps.imageUrl})}`);
     });
 
     test('should render shortcode text within span when imageUrl is provided', () => {
         render(<PostEmoji {...baseProps}/>);
 
-        expect(screen.getByTitle(':' + baseProps.name + ':')).toHaveTextContent(`:${baseProps.name}:`);
+        expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toHaveTextContent(`:${baseProps.name}:`);
     });
 
     test('should render original text when imageUrl is empty', () => {
@@ -34,7 +34,7 @@ describe('PostEmoji', () => {
 
         render(<PostEmoji {...props}/>);
 
-        expect(screen.queryByTitle(':' + baseProps.name + ':')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).not.toBeInTheDocument();
         expect(screen.getByText(`:${props.name}:`)).toBeInTheDocument();
     });
 });

webapp/channels/src/components/post_emoji/post_emoji.tsx

@@ -3,6 +3,8 @@
 
 import React from 'react';
 
+import WithTooltip from 'components/with_tooltip';
+
 interface Props {
     name: string;
     imageUrl: string;
@@ -22,14 +24,22 @@ const PostEmoji = ({name, imageUrl}: Props) => {
     }
 
     return (
-        <span
+        <WithTooltip
-            alt={emojiText}
+            id='postEmoji__tooltip'
-            className='emoticon'
             title={emojiText}
-            style={{backgroundImage: backgroundImageUrl}}
+            emoji={name}
+            emojiStyle='large'
+            placement='top'
         >
-            {emojiText}
+            <span
-        </span>
+                alt={emojiText}
+                className='emoticon'
+                data-testid={`postEmoji.${emojiText}`}
+                style={{backgroundImage: backgroundImageUrl}}
+            >
+                {emojiText}
+            </span>
+        </WithTooltip>
     );
 };
 

webapp/channels/src/sass/components/_post.scss

@@ -2058,6 +2058,12 @@
                 }
             }
         }
+
+        .post-message__text {
+            span.emoticon[style]:hover {
+                cursor: pointer;
+            }
+        }
     }
 
     &.post-message--overflow {