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

@@ -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", {

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">