diff --git a/static/js/tippyjs.js b/static/js/tippyjs.js
index 209fde98f0..8eda03287a 100644
--- a/static/js/tippyjs.js
+++ b/static/js/tippyjs.js
@@ -169,20 +169,8 @@ export function initialize() {
         onShow(instance) {
             // Handle dynamic "starred messages" and "edit" widgets.
             const $elem = $(instance.reference);
-            let content = $elem.attr("data-tippy-content");
-            if (content === undefined) {
-                // Tippy cannot get the content for message edit button
-                // as it is dynamically inserted based on editability.
-                // So, we have to manually get the i element to get the
-                // content from it.
-                //
-                // TODO: Change the template structure so logic is unnecessary.
-                const $edit_button = $elem.find("i.edit_message_button");
-                content = $edit_button.attr("data-tippy-content");
-            }
-
-            instance.setContent(content);
-            return true;
+            const $template = $("#" + $elem.attr("data-tooltip-template-id"));
+            instance.setContent(parse_html($template.html()));
         },
     });
 
diff --git a/static/js/ui.js b/static/js/ui.js
index 45af5454f7..ae7d8cec30 100644
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -1,7 +1,6 @@
 import $ from "jquery";
 import SimpleBar from "simplebar";
 
-import {$t} from "./i18n";
 import * as message_lists from "./message_lists";
 
 // What, if anything, obscures the home tab?
@@ -74,14 +73,10 @@ export function update_starred_view(message_id, new_value) {
             $elt.removeClass("fa-star").addClass("fa-star-o");
             $star_container.addClass("empty-star");
         }
-        const title_state = starred ? $t({defaultMessage: "Unstar"}) : $t({defaultMessage: "Star"});
-        $star_container.attr(
-            "data-tippy-content",
-            $t(
-                {defaultMessage: "{starred_status} this message (Ctrl + s)"},
-                {starred_status: title_state},
-            ),
-        );
+        const data_template_id = starred
+            ? "unstar-message-tooltip-template"
+            : "star-message-tooltip-template";
+        $star_container.attr("data-tooltip-template-id", data_template_id);
     });
 }
 
diff --git a/static/js/ui_init.js b/static/js/ui_init.js
index 5ab5e7793a..36a27899e8 100644
--- a/static/js/ui_init.js
+++ b/static/js/ui_init.js
@@ -151,7 +151,16 @@ function message_hover($message_row) {
         can_move_message,
         msg_id: id,
     };
-    $message_row.find(".edit_content").html(render_edit_content_button(args));
+    const $edit_content = $message_row.find(".edit_content");
+    $edit_content.html(render_edit_content_button(args));
+
+    let data_template_id = "view-source-tooltip-template";
+    if (args.is_content_editable) {
+        data_template_id = "edit-content-tooltip-template";
+    } else if (args.can_move_message) {
+        data_template_id = "move-message-tooltip-template";
+    }
+    $edit_content.attr("data-tooltip-template-id", data_template_id);
 }
 
 function initialize_bottom_whitespace() {
diff --git a/static/templates/edit_content_button.hbs b/static/templates/edit_content_button.hbs
index 3a9af4556b..d449408536 100644
--- a/static/templates/edit_content_button.hbs
+++ b/static/templates/edit_content_button.hbs
@@ -1,7 +1,7 @@
 {{#if is_content_editable}}
-<i class="fa fa-pencil edit_content_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Edit message' }} (e)" data-tippy-content="{{#tr}}Edit message{{/tr}} (e)"></i>
+<i class="fa fa-pencil edit_content_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Edit message' }} (e)"></i>
 {{else if can_move_message}}
-<i class="fa fa-arrows move_message_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Move message' }} (m)" data-tippy-content="{{#tr}}Move message{{/tr}} (m)"></i>
+<i class="fa fa-arrows move_message_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Move message' }} (m)"></i>
 {{else}}
-<i class="fa fa-file-code-o view_source_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'View message source' }} (e)" data-tippy-content="{{#tr}}View message source{{/tr}} (e)" data-message-id="{{msg_id}}"></i>
+<i class="fa fa-file-code-o view_source_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'View message source' }} (e)" data-message-id="{{msg_id}}"></i>
 {{/if}}
diff --git a/static/templates/message_controls.hbs b/static/templates/message_controls.hbs
index 6af17e288d..0b85125b9f 100644
--- a/static/templates/message_controls.hbs
+++ b/static/templates/message_controls.hbs
@@ -1,18 +1,38 @@
 <div class="message_controls{{#status_message}} sender-status-controls{{/status_message}} no-select">
     {{#if msg/sent_by_me}}
-    <div class="edit_content message_control_button"></div>
+    <div class="edit_content message_control_button" data-tooltip-template-id="view-source-tooltip-template"></div>
+    <template id="edit-content-tooltip-template">
+        {{#tr}}Edit message{{/tr}}
+        {{hotkey_hints "E"}}
+    </template>
+    <template id="move-message-tooltip-template">
+        {{#tr}}Move message{{/tr}}
+        {{hotkey_hints "M"}}
+    </template>
+    <template id="view-source-tooltip-template">
+        {{#tr}}View message source{{/tr}}
+        {{hotkey_hints "E"}}
+    </template>
     {{/if}}
 
     {{#unless msg/sent_by_me}}
-    <div class="reaction_button message_control_button" data-tippy-content="{{t 'Add emoji reaction' }} (:)">
+    <div class="reaction_button message_control_button" data-tooltip-template-id="add-emoji-tooltip-template">
         <i class="fa fa-smile-o" aria-label="{{#tr}}Add emoji reaction{{/tr}} (:)" role="button" aria-haspopup="true" tabindex="0"></i>
     </div>
+    <template id="add-emoji-tooltip-template">
+        {{#tr}}Add emoji reaction{{/tr}}
+        {{hotkey_hints ":"}}
+    </template>
     {{/unless}}
 
     {{#unless msg/locally_echoed}}
-    <div class="actions_hover message_control_button" data-tippy-content="{{#tr}}Message actions{{/tr}} (i)" >
+    <div class="actions_hover message_control_button" data-tooltip-template-id="message-actions-tooltip-template" >
         <i class="zulip-icon zulip-icon-ellipsis-v-solid" role="button" aria-haspopup="true" tabindex="0" aria-label="{{#tr}}Message actions{{/tr}}"></i>
     </div>
+    <template id="message-actions-tooltip-template">
+        {{#tr}}Message actions{{/tr}}
+        {{hotkey_hints "I"}}
+    </template>
     {{/unless}}
 
     <div class="message_failed {{#unless msg.failed_request}}hide{{/unless}}">
@@ -26,9 +46,17 @@
     </div>
 
     {{#unless msg/locally_echoed}}
-    <div class="star_container message_control_button {{#if msg/starred}}{{else}}empty-star{{/if}}" data-tippy-content="{{#with msg}}{{#tr}}{starred_status} this message{{/tr}}{{/with}} (Ctrl + s)">
+    <div class="star_container message_control_button {{#if msg/starred}}{{else}}empty-star{{/if}}" data-tooltip-template-id="{{#if msg/starred}}unstar{{else}}star{{/if}}-message-tooltip-template">
         <i role="button" tabindex="0" class="star fa {{#if msg/starred}}fa-star{{else}}fa-star-o{{/if}}"></i>
     </div>
+    <template id="star-message-tooltip-template">
+        <span class="starred-status">{{#tr}}Star this message{{/tr}}</span>
+        {{hotkey_hints "Ctrl" "S"}}
+    </template>
+    <template id="unstar-message-tooltip-template">
+        <span class="starred-status">{{#tr}}Unstar this message{{/tr}}</span>
+        {{hotkey_hints "Ctrl" "S"}}
+    </template>
     {{/unless}}
 
 </div>