From 6ddaaa4ef9bbce2b8c265ac9b674d261be5772fd Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Fri, 20 Sep 2024 14:37:55 +0530
Subject: [PATCH] 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 |  2 +-
 web/src/portico/tippyjs.ts     | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/templates/zerver/register.html b/templates/zerver/register.html
index 94718cfc26..89a1b4f50b 100644
--- a/templates/zerver/register.html
+++ b/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 %}
diff --git a/web/src/portico/tippyjs.ts b/web/src/portico/tippyjs.ts
index 3573873eae..ae368feb12 100644
--- a/web/src/portico/tippyjs.ts
+++ b/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);
+        },
+    });
 }
 
 $(() => {