compose: Delegate max-length tooltip to body.

web/src/compose_tooltips.ts

@@ -13,6 +13,7 @@ import {$t} from "./i18n.ts";
 import {pick_empty_narrow_banner} from "./narrow_banner.ts";
 import * as narrow_state from "./narrow_state.ts";
 import * as popover_menus from "./popover_menus.ts";
+import {realm} from "./state_data.ts";
 import {EXTRA_LONG_HOVER_DELAY, INSTANT_HOVER_DELAY, LONG_HOVER_DELAY} from "./tippyjs.ts";
 import {parse_html} from "./ui_util.ts";
 import {user_settings} from "./user_settings.ts";
@@ -168,6 +169,21 @@ export function initialize(): void {
         appendTo: () => document.body,
     });
 
+    tippy.delegate("body", {
+        target: "#compose-limit-indicator",
+        delay: INSTANT_HOVER_DELAY,
+        trigger: "mouseenter",
+        appendTo: () => document.body,
+        onShow(instance) {
+            instance.setContent(
+                $t(
+                    {defaultMessage: `Maximum message length: {max_length} characters`},
+                    {max_length: realm.max_message_length},
+                ),
+            );
+        },
+    });
+
     tippy.delegate("body", {
         target: "#compose-send-button",
         delay: EXTRA_LONG_HOVER_DELAY,

web/src/ui_init.js

@@ -185,7 +185,6 @@ function initialize_compose_box() {
                 giphy_enabled: giphy_state.is_giphy_enabled(),
                 max_stream_name_length: realm.max_stream_name_length,
                 max_topic_length: realm.max_topic_length,
-                max_message_length: realm.max_message_length,
             }),
         ),
     );

web/templates/compose.hbs

@@ -89,7 +89,7 @@
                             <a id="compose-drafts-button" role="button" class="send-control-button hide-sm" tabindex=0 href="#drafts">
                                 <span class="compose-drafts-text">{{t 'Drafts' }}</span><span class="compose-drafts-count-container">(<span class="compose-drafts-count"></span>)</span>
                             </a>
-                            <span id="compose-limit-indicator" class="tippy-zulip-tooltip" data-tippy-content="{{t 'Maximum message length: {max_message_length} characters' }}"></span>
+                            <span id="compose-limit-indicator"></span>
                             <div class="message-send-controls">
                                 <button type="submit" id="compose-send-button" class="send_message compose-submit-button compose-send-or-save-button" aria-label="{{t 'Send' }}">
                                     <img class="loader" alt="" src="" />