diff --git a/webapp/channels/src/components/post_emoji/post_emoji.test.tsx b/webapp/channels/src/components/post_emoji/post_emoji.test.tsx
index 6b7d86dbc5..404cc84773 100644
--- a/webapp/channels/src/components/post_emoji/post_emoji.test.tsx
+++ b/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.getByTitle(':' + baseProps.name + ':')).toHaveStyle(`backgroundImage: url(${baseProps.imageUrl})}`);
+        expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toBeInTheDocument();
+        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();
     });
 });
diff --git a/webapp/channels/src/components/post_emoji/post_emoji.tsx b/webapp/channels/src/components/post_emoji/post_emoji.tsx
index e1c59be88d..e32adec457 100644
--- a/webapp/channels/src/components/post_emoji/post_emoji.tsx
+++ b/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
-            alt={emojiText}
-            className='emoticon'
+        <WithTooltip
+            id='postEmoji__tooltip'
             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>
     );
 };
 
diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss
index 31fa195694..caabeebde6 100644
--- a/webapp/channels/src/sass/components/_post.scss
+++ b/webapp/channels/src/sass/components/_post.scss
@@ -2058,6 +2058,12 @@
                 }
             }
         }
+
+        .post-message__text {
+            span.emoticon[style]:hover {
+                cursor: pointer;
+            }
+        }
     }
 
     &.post-message--overflow {