diff --git a/static/js/ui_init.js b/static/js/ui_init.js
index 3b18031d58..ebb3616ef0 100644
--- a/static/js/ui_init.js
+++ b/static/js/ui_init.js
@@ -335,10 +335,6 @@ export function initialize_kitchen_sink_stuff() {
 
     $('.copy_message[data-toggle="tooltip"]').tooltip();
 
-    // We disable animations here because they can cause the tooltip
-    // to change shape while fading away in weird way.
-    $("#keyboard-icon").tooltip({placement: "left", animation: false});
-
     $("body").on("mouseover", ".message_edit_content", function () {
         $(this).closest(".message_row").find(".copy_message").show();
     });
diff --git a/templates/zerver/app/right_sidebar.html b/templates/zerver/app/right_sidebar.html
index 5550b8c136..9598dd9335 100644
--- a/templates/zerver/app/right_sidebar.html
+++ b/templates/zerver/app/right_sidebar.html
@@ -21,7 +21,7 @@
             <a id="invite-user-link" href="#invite"><i class="fa fa-user-plus" aria-hidden="true"></i>{{ _('Invite more users') }}</a>
             {% endif %}
             <a id="sidebar-keyboard-shortcuts" data-overlay-trigger="keyboard-shortcuts">
-                <i class="fa fa-keyboard-o fa-2x" id="keyboard-icon" data-html="true" data-toggle="tooltip" title="{{ _('Keyboard shortcuts') }} <span class='hotkey-hint'>(?)</span>"></i>
+                <i class="fa fa-keyboard-o fa-2x tippy-zulip-tooltip" id="keyboard-icon" data-tippy-allowHtml="true" data-tippy-content="{{ _('Keyboard shortcuts') }} <span class='hotkey-hint'>(?)</span>"></i>
             </a>
         </div>
     </div>