tooltips: Use tippy to display tooltips.

Fixes: #27817
Co-Authored-By: linn.peterson <linn@pajp.net>
Co-Authored-By: Aman Agrawal <amanagr@zulip.com>

web/src/tippyjs.ts

@@ -136,6 +136,25 @@ export function initialize(): void {
         placement: "bottom",
     });
 
+    tippy.delegate("body", {
+        target: "#subscription_overlay .subscription_settings .sub-stream-name",
+        delay: LONG_HOVER_DELAY,
+        appendTo: () => document.body,
+        placement: "top",
+        onShow(instance) {
+            const stream_name_element = instance.reference;
+            assert(stream_name_element instanceof HTMLElement);
+            // Only show tooltip if the stream name is truncated.
+            // See https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
+            // for more details.
+            if (stream_name_element.offsetWidth >= stream_name_element.scrollWidth) {
+                return false;
+            }
+
+            return undefined;
+        },
+    });
+
     tippy.delegate("body", {
         target: ".tippy-left-sidebar-tooltip",
         placement: "right",

web/templates/settings/admin_emoji_list.hbs

@@ -18,7 +18,7 @@
         {{/if}}
     </td>
     <td>
-        <button class="button rounded small delete btn-danger" {{#unless can_delete_emoji}}disabled="disabled"{{/unless}} data-emoji-name="{{name}}">
+        <button class="button rounded small delete btn-danger tippy-zulip-delayed-tooltip" {{#unless can_delete_emoji}}disabled="disabled"{{/unless}} data-tippy-content="{{t 'Delete' }}" data-emoji-name="{{name}}">
             <i class="fa fa-trash-o" aria-hidden="true"></i>
         </button>
     </td>

web/templates/settings/admin_linkifier_list.hbs

@@ -14,10 +14,10 @@
     </td>
     {{#if ../can_modify}}
     <td class="no-select actions">
-        <button class="button small edit btn-warning" data-linkifier-id="{{id}}" title="{{t 'Edit' }}" aria-label="{{t 'Edit' }}">
+        <button class="button small edit btn-warning tippy-zulip-delayed-tooltip" data-linkifier-id="{{id}}" data-tippy-content="{{t 'Edit' }}" aria-label="{{t 'Edit' }}">
             <i class="fa fa-pencil"></i>
         </button>
-        <button class="button small delete btn-danger" data-linkifier-id="{{id}}" title="{{t 'Delete' }}" aria-label="{{t 'Delete' }}">
+        <button class="button small delete btn-danger tippy-zulip-delayed-tooltip" data-linkifier-id="{{id}}" data-tippy-content="{{t 'Delete' }}" aria-label="{{t 'Delete' }}">
             <i class="fa fa-trash-o"></i>
         </button>
     </td>

web/templates/settings/admin_profile_field_list.hbs

@@ -33,10 +33,10 @@
     </td>
     {{#if ../can_modify}}
     <td class="actions">
-        <button class="button rounded small btn-warning open-edit-form-modal tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Edit custom profile field' }}" data-profile-field-id="{{id}}">
+        <button class="button rounded small btn-warning open-edit-form-modal tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Edit' }}" data-profile-field-id="{{id}}">
             <i class="fa fa-pencil" aria-hidden="true"></i>
         </button>
-        <button class="button rounded small delete btn-danger tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete custom profile field' }}" data-profile-field-id="{{id}}">
+        <button class="button rounded small delete btn-danger tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete' }}" data-profile-field-id="{{id}}">
             <i class="fa fa-trash-o" aria-hidden="true"></i>
         </button>
     </td>

web/templates/settings/alert_word_settings_item.hbs

@@ -7,7 +7,7 @@
         </div>
     </td>
     <td>
-        <button type="submit" class="button rounded small delete btn-danger remove-alert-word" title="{{t 'Delete alert word' }}" data-word="{{word}}">
+        <button type="submit" class="button rounded small delete btn-danger remove-alert-word tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete' }}" data-word="{{word}}">
             <i class="fa fa-trash-o" aria-hidden="true"></i>
         </button>
     </td>

web/templates/settings/bot_settings.hbs

@@ -22,7 +22,7 @@
         <div id="active_bots_list_container" class="bots_section" data-bot-settings-section="active-bots">
             <div class="config-download-text">
                 <span>{{t 'Download config of all active outgoing webhook bots in Zulip Botserver format.' }}</span>
-                <a type="submit" download="{{botserverrc}}" id= "download_botserverrc" class="btn" title="{{t 'Download botserverrc' }}">
+                <a type="submit" download="{{botserverrc}}" id= "download_botserverrc" class="btn tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Download botserverrc' }}">
                     <i class="fa fa-download sea-green" aria-hidden="true"></i>
                 </a>
             </div>

web/templates/settings/default_stream_choice.hbs

@@ -1,6 +1,6 @@
 <div class="choice-row" data-value="{{value}}">
     {{> ../dropdown_widget widget_name=stream_dropdown_widget_name default_text=(t 'Select channel')}}
-    <button type="button" class="button rounded small delete-choice" title="{{t 'Delete' }}">
+    <button type="button" class="button rounded small delete-choice tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete' }}">
         <i class="fa fa-trash-o" aria-hidden="true"></i>
     </button>
 </div>

web/templates/settings/organization_profile_admin.hbs

@@ -51,7 +51,7 @@
         </div>
         <a href="/login/?preview=true" target="_blank" rel="noopener noreferrer" class="button rounded sea-green w-200 block" id="id_org_profile_preview">
             {{t 'Preview organization profile' }}
-            <i class="fa fa-external-link" aria-hidden="true" title="{{t 'Preview organization profile' }}"></i>
+            <i class="fa fa-external-link" aria-hidden="true"></i>
         </a>
 
         <div class="subsection-header">

web/templates/settings/profile_settings.hbs

@@ -64,7 +64,7 @@
             </div>
             <button class="button rounded sea-green w-200 block" id="show_my_user_profile_modal">
                 {{t 'Preview profile' }}
-                <i class="fa fa-external-link" aria-hidden="true" title="{{t 'Preview profile' }}"></i>
+                <i class="fa fa-external-link" aria-hidden="true"></i>
             </button>
         </div>
     </div>

web/templates/settings/uploaded_files_list.hbs

@@ -1,7 +1,7 @@
 {{#with attachment}}
 <tr class="uploaded_file_row" id="{{name}}" data-attachment-id="{{id}}">
     <td>
-        <a type="submit" href="/user_uploads/{{path_id}}" target="_blank" rel="noopener noreferrer" title="{{t 'View file' }}">
+        <a type="submit" class="tippy-zulip-delayed-tooltip" href="/user_uploads/{{path_id}}" target="_blank" rel="noopener noreferrer" data-tippy-content="{{t 'View file' }}">
             {{ name }}
         </a>
     </td>

web/templates/stream_settings/stream_settings.hbs

@@ -39,7 +39,7 @@
                   invite_only=invite_only
                   is_web_public=is_web_public }}
                 <div class="stream-name">
-                    <span class="sub-stream-name" title="{{name}}">{{name}}</span>
+                    <span class="sub-stream-name" data-tippy-content="{{name}}">{{name}}</span>
                 </div>
                 <div class="stream_change_property_info alert-notification"></div>
                 <div class="button-group" {{#unless can_change_name_description}}style="display:none"{{/unless}}>