diff --git a/plugins/chat/assets/stylesheets/common/chat-message.scss b/plugins/chat/assets/stylesheets/common/chat-message.scss
index 0259b275108..230808baa62 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message.scss
@@ -27,8 +27,12 @@
 [data-content][data-identifier="chat-message-reaction-tooltip"] {
   font-size: var(--font-down-1);
 
+  .fk-d-tooltip__inner-content {
+    display: block;
+  }
+
   .emoji {
-    padding-left: 0.5rem;
+    padding-left: 0.25rem;
   }
 }
 
diff --git a/plugins/chat/config/locales/client.en.yml b/plugins/chat/config/locales/client.en.yml
index 9163cf14e81..b91b7fffd35 100644
--- a/plugins/chat/config/locales/client.en.yml
+++ b/plugins/chat/config/locales/client.en.yml
@@ -424,17 +424,17 @@ en:
         type: "Chat message"
 
       reactions:
-        only_you: "You reacted with :%{emoji}:"
-        you_and_single_user: "You and %{username} reacted with :%{emoji}:"
-        you_and_multiple_users: "You, %{commaSeparatedUsernames} and %{username} reacted with :%{emoji}:"
+        only_you: "<span>You reacted with </span>:%{emoji}:"
+        you_and_single_user: "<span>You and %{username} reacted with </span>:%{emoji}:"
+        you_and_multiple_users: "<span>You, %{commaSeparatedUsernames} and %{username} reacted with </span>:%{emoji}:"
         you_multiple_users_and_more:
-          one: "You, %{commaSeparatedUsernames} and %{count} other reacted with :%{emoji}:"
-          other: "You, %{commaSeparatedUsernames} and %{count} others reacted with :%{emoji}:"
-        single_user: "%{username} reacted with :%{emoji}:"
-        multiple_users: "%{commaSeparatedUsernames} and %{username} reacted with :%{emoji}:"
+          one: "<span>You, %{commaSeparatedUsernames} and %{count} other reacted with </span>:%{emoji}:"
+          other: "<span>You, %{commaSeparatedUsernames} and %{count} others reacted with </span>:%{emoji}:"
+        single_user: "<span>%{username} reacted with </span>:%{emoji}:"
+        multiple_users: "<span>%{commaSeparatedUsernames} and %{username} reacted with </span>:%{emoji}:"
         multiple_users_and_more:
-          one: "%{commaSeparatedUsernames} and %{count} other reacted with :%{emoji}:"
-          other: "%{commaSeparatedUsernames} and %{count} others reacted with :%{emoji}:"
+          one: "<span>%{commaSeparatedUsernames} and %{count} other reacted with </span>:%{emoji}:"
+          other: "<span>%{commaSeparatedUsernames} and %{count} others reacted with </span>:%{emoji}:"
 
       composer:
         toggle_toolbar: "Toggle toolbar"
diff --git a/plugins/chat/test/javascripts/unit/lib/get-reaction-text-test.js b/plugins/chat/test/javascripts/unit/lib/get-reaction-text-test.js
index 42f04dce5ed..d8ff01ac7d6 100644
--- a/plugins/chat/test/javascripts/unit/lib/get-reaction-text-test.js
+++ b/plugins/chat/test/javascripts/unit/lib/get-reaction-text-test.js
@@ -23,7 +23,7 @@ module("Discourse Chat | Unit | get-reaction-text", function () {
 
     assert.strictEqual(
       getReactionText(reaction, currentUser),
-      "You reacted with :heart:"
+      "<span>You reacted with </span>:heart:"
     );
   });
 
@@ -38,7 +38,7 @@ module("Discourse Chat | Unit | get-reaction-text", function () {
 
     assert.strictEqual(
       getReactionText(reaction, currentUser),
-      "You and martin reacted with :heart:"
+      "<span>You and martin reacted with </span>:heart:"
     );
   });
 
@@ -55,7 +55,7 @@ module("Discourse Chat | Unit | get-reaction-text", function () {
 
     assert.strictEqual(
       getReactionText(reaction, currentUser),
-      "You, user0, user1, user2, user3, user4, user5, user6, user7, user8, user9, user10, user11, user12, user13, user14 and 1 other reacted with :heart:"
+      "<span>You, user0, user1, user2, user3, user4, user5, user6, user7, user8, user9, user10, user11, user12, user13, user14 and 1 other reacted with </span>:heart:"
     );
   });
 
@@ -72,7 +72,7 @@ module("Discourse Chat | Unit | get-reaction-text", function () {
 
     assert.strictEqual(
       getReactionText(reaction, currentUser),
-      "You, user0, user1, user2, user3, user4, user5, user6, user7, user8, user9, user10, user11 and user12 reacted with :heart:"
+      "<span>You, user0, user1, user2, user3, user4, user5, user6, user7, user8, user9, user10, user11 and user12 reacted with </span>:heart:"
     );
   });
 
@@ -86,7 +86,7 @@ module("Discourse Chat | Unit | get-reaction-text", function () {
 
     assert.strictEqual(
       getReactionText(reaction, currentUser),
-      "You reacted with :heart:"
+      "<span>You reacted with </span>:heart:"
     );
   });
 
@@ -101,7 +101,7 @@ module("Discourse Chat | Unit | get-reaction-text", function () {
 
     assert.strictEqual(
       getReactionText(reaction, currentUser),
-      "You and martin reacted with :heart:"
+      "<span>You and martin reacted with </span>:heart:"
     );
   });
 
@@ -118,7 +118,7 @@ module("Discourse Chat | Unit | get-reaction-text", function () {
 
     assert.strictEqual(
       getReactionText(reaction, currentUser),
-      "You, user0, user1, user2, user3, user4, user5, user6, user7, user8, user9, user10, user11, user12, user13, user14 and 1 other reacted with :heart:"
+      "<span>You, user0, user1, user2, user3, user4, user5, user6, user7, user8, user9, user10, user11, user12, user13, user14 and 1 other reacted with </span>:heart:"
     );
   });
 
@@ -135,7 +135,7 @@ module("Discourse Chat | Unit | get-reaction-text", function () {
 
     assert.strictEqual(
       getReactionText(reaction, currentUser),
-      "You, user0, user1, user2, user3, user4, user5, user6, user7, user8, user9, user10, user11 and user12 reacted with :heart:"
+      "<span>You, user0, user1, user2, user3, user4, user5, user6, user7, user8, user9, user10, user11 and user12 reacted with </span>:heart:"
     );
   });
 
@@ -148,7 +148,7 @@ module("Discourse Chat | Unit | get-reaction-text", function () {
 
     assert.strictEqual(
       getReactionText(reaction, fabricators.user()),
-      "martin reacted with :heart:"
+      "<span>martin reacted with </span>:heart:"
     );
   });
 
@@ -162,7 +162,7 @@ module("Discourse Chat | Unit | get-reaction-text", function () {
 
     assert.strictEqual(
       getReactionText(reaction, fabricators.user()),
-      "claude and martin reacted with :heart:"
+      "<span>claude and martin reacted with </span>:heart:"
     );
   });
 
@@ -177,7 +177,7 @@ module("Discourse Chat | Unit | get-reaction-text", function () {
 
     assert.strictEqual(
       getReactionText(reaction, fabricators.user()),
-      "user0, user1, user2, user3, user4, user5, user6, user7, user8, user9, user10, user11, user12, user13, user14 and 1 other reacted with :heart:"
+      "<span>user0, user1, user2, user3, user4, user5, user6, user7, user8, user9, user10, user11, user12, user13, user14 and 1 other reacted with </span>:heart:"
     );
   });
 
@@ -192,7 +192,7 @@ module("Discourse Chat | Unit | get-reaction-text", function () {
 
     assert.strictEqual(
       getReactionText(reaction, fabricators.user()),
-      "user0, user1, user2, user3, user4, user5, user6, user7, user8, user9, user10, user11, user12 and user13 reacted with :heart:"
+      "<span>user0, user1, user2, user3, user4, user5, user6, user7, user8, user9, user10, user11, user12 and user13 reacted with </span>:heart:"
     );
   });
 });