From 8e718069584587e7a9e57d78fa10b5b1521ce619 Mon Sep 17 00:00:00 2001
From: Yaswanth Kosuru <yaswanthkosuru999@gmail.com>
Date: Wed, 18 Sep 2024 06:07:28 +0000
Subject: [PATCH] tooltips: Change tooltip for channels subscribe/unsubscribe
 button.

Previously, the tooltips for the subscribe and unsubscribe buttons
were static, showing the same tooltip regardless of the button's
state. This update improves the user experience by introducing
dynamic tooltips that reflect the current state of the button.

Changes include:
- Added multiple HTML tooltip templates for different button states
  subscribed, unsubscribed.
- Updated JavaScript to select and render the appropriate tooltip based on
  the button's state.
- Modified `data-tool-tip-id` prop to use state-specific tooltip
  templates.

Fixes zulip#31500.
---
 web/src/tippyjs.ts                  | 11 +++++++++++
 web/templates/tooltip_templates.hbs |  8 ++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/web/src/tippyjs.ts b/web/src/tippyjs.ts
index cdff52f8ef..52b627ed31 100644
--- a/web/src/tippyjs.ts
+++ b/web/src/tippyjs.ts
@@ -152,6 +152,17 @@ export function initialize(): void {
         delay: EXTRA_LONG_HOVER_DELAY,
         appendTo: () => document.body,
         placement: "bottom",
+        onShow(instance) {
+            let template = "show-unsubscribe-tooltip-template";
+            if (instance.reference.classList.contains("unsubscribed")) {
+                template = "show-subscribe-tooltip-template";
+            }
+            $(instance.reference).attr("data-tooltip-template-id", template);
+            instance.setContent(get_tooltip_content(instance.reference));
+        },
+        onHidden(instance) {
+            instance.destroy();
+        },
     });
 
     tippy.delegate("body", {
diff --git a/web/templates/tooltip_templates.hbs b/web/templates/tooltip_templates.hbs
index 2b90174cfa..66e3dd67c4 100644
--- a/web/templates/tooltip_templates.hbs
+++ b/web/templates/tooltip_templates.hbs
@@ -239,8 +239,12 @@
     {{t 'Create new channel' }}
     {{tooltip_hotkey_hints "N"}}
 </template>
-<template id="toggle-subscription-tooltip-template">
-    {{t 'Toggle subscription' }}
+<template id="show-subscribe-tooltip-template">
+    {{t 'Subscribe to this channel' }}
+    {{tooltip_hotkey_hints "Shift" "S"}}
+</template>
+<template id="show-unsubscribe-tooltip-template">
+    {{t 'Unsubscribe from this channel' }}
     {{tooltip_hotkey_hints "Shift" "S"}}
 </template>
 <template id="view-stream-tooltip-template">