signup: Show realm name in a tooltip on signup page.

This is needed to make sure that user can see the realm
name in case it does not fits into the UI and is shown
with ellipsis.

Fixes #31676.

templates/zerver/register.html

@@ -72,7 +72,7 @@ Form is validated both client-side using jquery-validation (see signup.js) and s
                 {% if realm_name and not creating_new_realm %}
                 <img class="avatar inline-block" src="{{ realm_icon }}" alt="" />
                 <div class="info-box inline-block">
-                    <div class="organization-name">{{ realm_name }}</div>
+                    <div class="organization-name organization-name-delayed-tooltip">{{ realm_name }}</div>
                     <div class="organization-path">{{ realm_url }}</div>
                 </div>
                 {% endif %}

web/src/portico/tippyjs.ts

@@ -1,6 +1,8 @@
 import $ from "jquery";
 import * as tippy from "tippy.js";
 
+const LONG_HOVER_DELAY: [number, number] = [750, 20];
+
 function initialize(): void {
     tippy.default("[data-tippy-content]", {
         // Same defaults as set in web app tippyjs module.
@@ -11,6 +13,18 @@ function initialize(): void {
         animation: true,
         placement: "bottom",
     });
+
+    tippy.default(".organization-name-delayed-tooltip", {
+        maxWidth: 300,
+        delay: LONG_HOVER_DELAY,
+        touch: ["hold", 750],
+        animation: true,
+        placement: "bottom",
+        onShow(instance) {
+            const content = $(instance.reference).text();
+            instance.setContent(content);
+        },
+    });
 }
 
 $(() => {