From 15a15240da6feb2909b61d601be6d93ae39d8e8a Mon Sep 17 00:00:00 2001
From: Hardik Dharmani <Ddharmani99@gmail.com>
Date: Sun, 9 Apr 2023 02:27:06 +0530
Subject: [PATCH] tooltips: Add tippy tooltips in manage stream settings.

Added tippy tooltips for create_stream_plus_button and
preview-stream-button in manage stream settings by adding
class `.tippy-zulip-delayed-tooltip` which add tooltips
with LONG_HOVER_DELAY. Added data-tippy-placement="bottom"
to match with 'Archive stream' tooltip.

Created a new tooltip for sub_unsub_button in tippyjs with
class .toggle-subscription-tooltip that has
EXTRA_LONG_HOVER_DELAY, placement equals to bottom
and appended to body.

Fixes part of #24311.
---
 web/src/tippyjs.js                                   |  7 +++++++
 web/templates/stream_settings/stream_settings.hbs    | 12 ++++++++++--
 .../stream_settings/stream_settings_overlay.hbs      |  6 +++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/web/src/tippyjs.js b/web/src/tippyjs.js
index f83bdc0837..388668d5d9 100644
--- a/web/src/tippyjs.js
+++ b/web/src/tippyjs.js
@@ -137,6 +137,13 @@ export function initialize() {
         },
     });
 
+    delegate("body", {
+        target: ".toggle-subscription-tooltip",
+        delay: EXTRA_LONG_HOVER_DELAY,
+        appendTo: () => document.body,
+        placement: "bottom",
+    });
+
     delegate("body", {
         target: ".tippy-left-sidebar-tooltip",
         placement: "right",
diff --git a/web/templates/stream_settings/stream_settings.hbs b/web/templates/stream_settings/stream_settings.hbs
index 0bd44817a5..8c5e2eb02b 100644
--- a/web/templates/stream_settings/stream_settings.hbs
+++ b/web/templates/stream_settings/stream_settings.hbs
@@ -3,7 +3,7 @@
     {{#with sub}}
     <div class="button-group">
         <div class="sub_unsub_button_wrapper inline-block">
-            <button class="button small rounded subscribe-button sub_unsub_button {{#if should_display_subscription_button}}tippy-zulip-tooltip{{/if}} {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" {{#if should_display_subscription_button}}data-tippy-content="{{t 'Toggle subscription'}} (S)" {{else}}disabled="disabled"{{/if}}>
+            <button class="button small rounded subscribe-button sub_unsub_button {{#if should_display_subscription_button}}toggle-subscription-tooltip{{/if}} {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" {{#if should_display_subscription_button}} data-tooltip-template-id="toggle-subscription-tooltip-template" {{else}}disabled="disabled"{{/if}}>
                 {{#if subscribed }}
                     {{t "Unsubscribe" }}
                 {{else}}
@@ -11,11 +11,19 @@
                 {{/if}}
             </button>
         </div>
-        <a href="{{preview_url}}" class="button small rounded tippy-zulip-tooltip" id="preview-stream-button" role="button" data-tippy-content="{{t 'View stream'}} (V)" {{#unless should_display_preview_button }}style="display: none"{{/unless}}><i class="fa fa-eye"></i></a>
+        <template id="toggle-subscription-tooltip-template">
+            {{t 'Toggle subscription' }}
+            {{tooltip_hotkey_hints "Shift" "S"}}
+        </template>
+        <a href="{{preview_url}}" class="button small rounded tippy-zulip-delayed-tooltip" id="preview-stream-button" role="button" data-tooltip-template-id="view-stream-tooltip-template" data-tippy-placement="bottom" {{#unless should_display_preview_button }}style="display: none"{{/unless}}><i class="fa fa-eye"></i></a>
         {{#if is_realm_admin}}
         <button class="button small rounded btn-danger deactivate tippy-zulip-tooltip" type="button" name="delete_button" data-tippy-content="{{t 'Archive stream'}}"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
         {{/if}}
     </div>
+    <template id="view-stream-tooltip-template">
+        {{t 'View stream' }}
+        {{tooltip_hotkey_hints "Shift" "V"}}
+    </template>
     {{/with}}
 </div>
 <div class="subscription_settings" data-stream-id="{{sub.stream_id}}">
diff --git a/web/templates/stream_settings/stream_settings_overlay.hbs b/web/templates/stream_settings/stream_settings_overlay.hbs
index dca2ef33d6..1fbe1e2f0e 100644
--- a/web/templates/stream_settings/stream_settings_overlay.hbs
+++ b/web/templates/stream_settings/stream_settings_overlay.hbs
@@ -12,9 +12,13 @@
                 <div class="search-container">
                     <div id="add_new_subscription">
                         {{#if can_create_streams}}
-                        <button class="create_stream_button create_stream_plus_button tippy-zulip-tooltip" data-tippy-content="{{t 'Create new stream' }} (n)" data-tippy-placement="bottom">
+                        <button class="create_stream_button create_stream_plus_button tippy-zulip-delayed-tooltip" data-tooltip-template-id="create-new-stream-tooltip-template" data-tippy-placement="bottom">
                             <span>+</span>
                         </button>
+                        <template id="create-new-stream-tooltip-template">
+                            {{t 'Create new stream' }}
+                            {{tooltip_hotkey_hints "N"}}
+                        </template>
                         {{/if}}
                         <div class="float-clear"></div>
                     </div>