From 8ef51e1b6ff205979fc14092ed90c7ea65cc02e8 Mon Sep 17 00:00:00 2001
From: Maneesh Shukla <shuklamaneesh24@gmail.com>
Date: Thu, 19 Jun 2025 15:08:03 +0530
Subject: [PATCH] tooltips: Fix incorrect tooltip on the spinner.

The "sub_unsub_status" spinner was inside the div with the "check" class
, causing the tooltip to appear over the spinner, which should only be
visible on the check icon.

This commit moves the "sub_unsub_status" spinner div outside, ensuring
the tooltip is now visible only when hovering over the check icon.
---
 web/styles/subscriptions.css                  |   1 -
 .../browse_streams_list_item.hbs              |  69 ++++++------
 .../browse_user_groups_list_item.hbs          | 104 +++++++++---------
 3 files changed, 90 insertions(+), 84 deletions(-)

diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index ecdcfe8f03..310976cdda 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -744,7 +744,6 @@ h4.user_group_setting_subsection_title {
     .check {
         width: 25px;
         height: 25px;
-        position: relative;
         margin-right: 12px;
         margin-top: 9px;
         background-size: 60% auto;
diff --git a/web/templates/stream_settings/browse_streams_list_item.hbs b/web/templates/stream_settings/browse_streams_list_item.hbs
index 2bf543bd5e..d7c7d23c6e 100644
--- a/web/templates/stream_settings/browse_streams_list_item.hbs
+++ b/web/templates/stream_settings/browse_streams_list_item.hbs
@@ -2,47 +2,50 @@
 <div class="stream-row" data-stream-id="{{stream_id}}" data-stream-name="{{name}}">
 
     {{#if subscribed}}
-        <div class="check checked sub_unsub_button tippy-zulip-tooltip" data-tooltip-template-id="unsubscribe-from-{{name}}-stream-tooltip-template">
+        <div class="check checked sub_unsub_button">
 
-            <template id="unsubscribe-from-{{name}}-stream-tooltip-template">
-                <span>
-                    {{#tr}}
-                        Unsubscribe from <z-stream></z-stream>
-                        {{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=this}}{{/inline}}
-                    {{/tr}}
-                </span>
-            </template>
+            <div class="tippy-zulip-tooltip" data-tooltip-template-id="unsubscribe-from-{{name}}-stream-tooltip-template">
+                <template id="unsubscribe-from-{{name}}-stream-tooltip-template">
+                    <span>
+                        {{#tr}}
+                            Unsubscribe from <z-stream></z-stream>
+                            {{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=this}}{{/inline}}
+                        {{/tr}}
+                    </span>
+                </template>
 
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-                <path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
-            </svg>
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                    <path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
+                </svg>
+            </div>
             <div class='sub_unsub_status'></div>
         </div>
     {{else}}
-        <div class="check sub_unsub_button {{#unless should_display_subscription_button}}disabled{{/unless}} tippy-zulip-tooltip"
-          data-tooltip-template-id="{{#if should_display_subscription_button}}subscribe-to-{{name}}-stream-tooltip-template{{else}}cannot-subscribe-to-{{name}}-stream-tooltip-template{{/if}}">
+        <div class="check sub_unsub_button {{#unless should_display_subscription_button}}disabled{{/unless}}">
 
-            <template id="subscribe-to-{{name}}-stream-tooltip-template">
-                <span>
-                    {{#tr}}
-                        Subscribe to <z-stream></z-stream>
-                        {{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=this}}{{/inline}}
-                    {{/tr}}
-                </span>
-            </template>
+            <div class="tippy-zulip-tooltip"  data-tooltip-template-id="{{#if should_display_subscription_button}}subscribe-to-{{name}}-stream-tooltip-template{{else}}cannot-subscribe-to-{{name}}-stream-tooltip-template{{/if}}">
+                <template id="subscribe-to-{{name}}-stream-tooltip-template">
+                    <span>
+                        {{#tr}}
+                            Subscribe to <z-stream></z-stream>
+                            {{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=this}}{{/inline}}
+                        {{/tr}}
+                    </span>
+                </template>
 
-            <template id="cannot-subscribe-to-{{name}}-stream-tooltip-template">
-                <span>
-                    {{#tr}}
-                        Cannot subscribe to <z-stream></z-stream>
-                        {{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=this}}{{/inline}}
-                    {{/tr}}
-                </span>
-            </template>
+                <template id="cannot-subscribe-to-{{name}}-stream-tooltip-template">
+                    <span>
+                        {{#tr}}
+                            Cannot subscribe to <z-stream></z-stream>
+                            {{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=this}}{{/inline}}
+                        {{/tr}}
+                    </span>
+                </template>
 
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-                <path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193   c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181   c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267   V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282   C441.339,189.487,459.308,207.471,459.319,229.668z"/>
-            </svg>
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                    <path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193   c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181   c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267   V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282   C441.339,189.487,459.308,207.471,459.319,229.668z"/>
+                </svg>
+            </div>
             <div class='sub_unsub_status'></div>
         </div>
     {{/if}}
diff --git a/web/templates/user_group_settings/browse_user_groups_list_item.hbs b/web/templates/user_group_settings/browse_user_groups_list_item.hbs
index 04e2a013f7..1934cbd56d 100644
--- a/web/templates/user_group_settings/browse_user_groups_list_item.hbs
+++ b/web/templates/user_group_settings/browse_user_groups_list_item.hbs
@@ -1,72 +1,76 @@
 <div class="group-row {{#if deactivated}}deactivated-group{{/if}}" data-group-id="{{id}}" data-group-name="{{name}}">
     {{#if is_member}}
-        <div class="check checked join_leave_button tippy-zulip-tooltip {{#unless can_leave}}disabled{{/unless}} {{#unless is_direct_member}}not-direct-member{{/unless}}" data-tooltip-template-id="{{#if can_leave}}{{#if is_direct_member}}leave-{{name}}-group-tooltip-template{{else}}cannot-leave-{{name}}-because-of-subgroup-tooltip-template{{/if}}{{else}}cannot-leave-{{name}}-group-tooltip-template{{/if}}">
-            <template id="leave-{{name}}-group-tooltip-template">
-                <span>
-                    {{#tr}}
-                        Leave group {name}
-                    {{/tr}}
-                </span>
-            </template>
-
-            <template id="cannot-leave-{{name}}-because-of-subgroup-tooltip-template">
-                <span>
-                    {{#tr}}
-                        You are a member of this group because you are a member of a subgroup (<b>{associated_subgroup_names}</b>).
-                    {{/tr}}
-                </span>
-            </template>
-
-            <template id="cannot-leave-{{name}}-group-tooltip-template">
-                {{#if deactivated}}
+        <div class="check checked join_leave_button {{#unless can_leave}}disabled{{/unless}} {{#unless is_direct_member}}not-direct-member{{/unless}}">
+            <div class="tippy-zulip-tooltip" data-tooltip-template-id="{{#if can_leave}}{{#if is_direct_member}}leave-{{name}}-group-tooltip-template{{else}}cannot-leave-{{name}}-because-of-subgroup-tooltip-template{{/if}}{{else}}cannot-leave-{{name}}-group-tooltip-template{{/if}}">
+                <template id="leave-{{name}}-group-tooltip-template">
                     <span>
                         {{#tr}}
-                            You cannot leave a deactivated user group.
+                            Leave group {name}
                         {{/tr}}
                     </span>
-                {{else}}
+                </template>
+
+                <template id="cannot-leave-{{name}}-because-of-subgroup-tooltip-template">
                     <span>
                         {{#tr}}
-                            You do not have permission to leave this group.
+                            You are a member of this group because you are a member of a subgroup (<b>{associated_subgroup_names}</b>).
                         {{/tr}}
                     </span>
-                {{/if}}
-            </template>
+                </template>
 
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-                <path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
-            </svg>
+                <template id="cannot-leave-{{name}}-group-tooltip-template">
+                    {{#if deactivated}}
+                        <span>
+                            {{#tr}}
+                                You cannot leave a deactivated user group.
+                            {{/tr}}
+                        </span>
+                    {{else}}
+                        <span>
+                            {{#tr}}
+                                You do not have permission to leave this group.
+                            {{/tr}}
+                        </span>
+                    {{/if}}
+                </template>
+
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                    <path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
+                </svg>
+            </div>
             <div class='join_leave_status'></div>
         </div>
     {{else}}
-        <div class="check join_leave_button {{#unless can_join}}disabled{{/unless}} tippy-zulip-tooltip" data-tooltip-template-id="{{#if can_join}}join-{{name}}-group-tooltip-template{{else}}cannot-join-{{name}}-group-tooltip-template{{/if}}">
-            <template id="join-{{name}}-group-tooltip-template">
-                <span>
-                    {{#tr}}
-                        Join group {name}
-                    {{/tr}}
-                </span>
-            </template>
-
-            <template id="cannot-join-{{name}}-group-tooltip-template">
-                {{#if deactivated}}
+        <div class="check join_leave_button {{#unless can_join}}disabled{{/unless}}">
+            <div class="tippy-zulip-tooltip" data-tooltip-template-id="{{#if can_join}}join-{{name}}-group-tooltip-template{{else}}cannot-join-{{name}}-group-tooltip-template{{/if}}">
+                <template id="join-{{name}}-group-tooltip-template">
                     <span>
                         {{#tr}}
-                            You cannot join a deactivated user group.
+                            Join group {name}
                         {{/tr}}
                     </span>
-                {{else}}
-                    <span>
-                        {{#tr}}
-                            You do not have permission to join this group.
-                        {{/tr}}
-                    </span>
-                {{/if}}
-            </template>
+                </template>
 
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-                <path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193   c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181   c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267   V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282   C441.339,189.487,459.308,207.471,459.319,229.668z"/>
-            </svg>
+                <template id="cannot-join-{{name}}-group-tooltip-template">
+                    {{#if deactivated}}
+                        <span>
+                            {{#tr}}
+                                You cannot join a deactivated user group.
+                            {{/tr}}
+                        </span>
+                    {{else}}
+                        <span>
+                            {{#tr}}
+                                You do not have permission to join this group.
+                            {{/tr}}
+                        </span>
+                    {{/if}}
+                </template>
+
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                    <path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193   c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181   c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267   V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282   C441.339,189.487,459.308,207.471,459.319,229.668z"/>
+                </svg>
+            </div>
             <div class='join_leave_status'></div>
         </div>
     {{/if}}