diff --git a/app/assets/javascripts/discourse/app/components/emoji-picker.js b/app/assets/javascripts/discourse/app/components/emoji-picker.js
index 38eff47a556..3b20b486c75 100644
--- a/app/assets/javascripts/discourse/app/components/emoji-picker.js
+++ b/app/assets/javascripts/discourse/app/components/emoji-picker.js
@@ -12,6 +12,7 @@ import Component from "@ember/component";
 import { createPopper } from "@popperjs/core";
 import { htmlSafe } from "@ember/template";
 import { inject as service } from "@ember/service";
+import { underscore } from "@ember/string";
 
 function customEmojis() {
   const list = extendedEmojiList();
@@ -149,6 +150,7 @@ export default Component.extend({
     ].map((name, index) => {
       return {
         name,
+        title: `emoji_picker.${underscore(name)}_tone`,
         icon: index + 1 === this.selectedDiversity ? "check" : "",
       };
     });
diff --git a/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs b/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs
index f5873c44a1d..7dd6db19eb1 100644
--- a/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs
@@ -84,7 +84,7 @@
             {{d-button
               icon=diversityScale.icon
               class=(concat "diversity-scale " diversityScale.name)
-              title=(concat "emoji_picker." diversityScale.name "_tone")
+              title=diversityScale.title
               action=(action "onDiversitySelection" index)
             }}
           {{/each}}