From 66c359b1d5746b67229ac16a77ea4b6d850003c4 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Fri, 26 Feb 2021 08:50:06 +0000
Subject: [PATCH] settings: Use tippy for tooltip.

---
 static/templates/settings/account_settings.hbs            | 7 +++----
 static/templates/settings/bot_settings.hbs                | 3 +--
 static/templates/settings/notification_settings.hbs       | 6 ++----
 static/templates/settings/organization_profile_admin.hbs  | 2 +-
 static/templates/settings/organization_settings_admin.hbs | 8 ++++----
 5 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/static/templates/settings/account_settings.hbs b/static/templates/settings/account_settings.hbs
index ba732cb3dd..a3f8cfbb2f 100644
--- a/static/templates/settings/account_settings.hbs
+++ b/static/templates/settings/account_settings.hbs
@@ -13,8 +13,7 @@
                             {{page_params.delivery_email}}
                             <i class="fa fa-pencil"></i>
                         </button>
-                        <i class="fa fa-question-circle change_email_tooltip settings-info-icon" {{#if (or (not page_params.realm_email_changes_disabled) page_params.is_admin)}}style="display: none;"{{/if}} data-toggle="tooltip"
-                          title="{{t 'Email address changes are disabled in this organization.' }}"></i>
+                        <i class="tippy-zulip-tooltip fa fa-question-circle change_email_tooltip settings-info-icon" {{#if (or (not page_params.realm_email_changes_disabled) page_params.is_admin)}}style="display: none;"{{/if}} data-tippy-content="{{t 'Email address changes are disabled in this organization.' }}"></i>
                     </div>
 
                     <div id="change_email_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
@@ -53,9 +52,9 @@
                                 <span id="full_name_value">{{page_params.full_name}}</span>
                                 <i class="fa fa-pencil"></i>
                             </button>
-                            <i class="fa fa-question-circle change_name_tooltip settings-info-icon" data-toggle="tooltip"
+                            <i class="fa fa-question-circle change_name_tooltip tippy-zulip-tooltip settings-info-icon"
                               {{#if user_can_change_name}}style="display:none"{{/if}}
-                              title="{{t 'Name changes are disabled in this organization. Contact an administrator to change your name.' }}">
+                              data-tippy-content="{{t 'Name changes are disabled in this organization. Contact an administrator to change your name.' }}">
                             </i>
                         </div>
                         <div id="change_full_name_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
diff --git a/static/templates/settings/bot_settings.hbs b/static/templates/settings/bot_settings.hbs
index da6c857d84..3d91208f5f 100644
--- a/static/templates/settings/bot_settings.hbs
+++ b/static/templates/settings/bot_settings.hbs
@@ -35,8 +35,7 @@
                     <div class="input-group">
                         <label for="bot_type">
                             {{t "Bot type" }}
-                            <i class="fa fa-question-circle settings-info-icon bot_type_tooltip" aria-hidden="true" data-toggle="tooltip"
-                              title='{{t "Incoming webhooks can only send messages." }}'></i>
+                            <i class="fa fa-question-circle settings-info-icon bot_type_tooltip tippy-zulip-tooltip" aria-hidden="true" data-tippy-content='{{t "Incoming webhooks can only send messages." }}'></i>
                         </label>
                         <select name="bot_type" id="create_bot_type">
                             {{#each page_params.bot_types}}
diff --git a/static/templates/settings/notification_settings.hbs b/static/templates/settings/notification_settings.hbs
index d6ae9b5a95..6d8b87dd16 100644
--- a/static/templates/settings/notification_settings.hbs
+++ b/static/templates/settings/notification_settings.hbs
@@ -12,14 +12,12 @@
                         <th rowspan="2" width="14%" class="{{#if show_push_notifications_tooltip.push_notifications}}control-label-disabled{{/if}}">
                             {{t "Mobile"}}
                             {{#if (not page_params.realm_push_notifications_enabled) }}
-                            <i class="fa fa-question-circle settings-info-icon" data-toggle="tooltip"
-                              title="{{t 'Mobile push notifications are not configured on this server.' }}"></i>
+                            <i class="fa fa-question-circle settings-info-icon tippy-zulip-tooltip" data-tippy-content="{{t 'Mobile push notifications are not configured on this server.' }}"></i>
                             {{/if}}
                         </th>
                         <th rowspan="2" width="14%">{{t "Email"}}</th>
                         <th rowspan="2" width="14%">@all
-                            <i class="fa fa-question-circle settings-info-icon" data-toggle="tooltip"
-                              title="{{t 'Whether wildcard mentions like @all are treated as mentions for the purpose of notifications.' }}"></i>
+                            <i class="fa fa-question-circle settings-info-icon tippy-zulip-tooltip" data-tippy-content="{{t 'Whether wildcard mentions like @all are treated as mentions for the purpose of notifications.' }}"></i>
                         </th>
                     </tr>
                     <tr>
diff --git a/static/templates/settings/organization_profile_admin.hbs b/static/templates/settings/organization_profile_admin.hbs
index 694b8eb462..6e5085d2d9 100644
--- a/static/templates/settings/organization_profile_admin.hbs
+++ b/static/templates/settings/organization_profile_admin.hbs
@@ -67,7 +67,7 @@
         </div>
         <h3 class="light">
             {{t "Deactivate organization" }}
-            <i class="fa fa-info-circle settings-info-icon realm_allow_message_deleting_tooltip" data-toggle="tooltip" aria-hidden="true" title="{{t 'Only owners can deactivate the organization.' }}"></i>
+            <i class="fa fa-info-circle settings-info-icon realm_allow_message_deleting_tooltip tippy-zulip-tooltip" aria-hidden="true" data-tippy-content="{{t 'Only owners can deactivate the organization.' }}"></i>
         </h3>
         <div class="deactivate-realm-section">
             <div class="input-group">
diff --git a/static/templates/settings/organization_settings_admin.hbs b/static/templates/settings/organization_settings_admin.hbs
index f98f109eff..8316079ef2 100644
--- a/static/templates/settings/organization_settings_admin.hbs
+++ b/static/templates/settings/organization_settings_admin.hbs
@@ -43,8 +43,8 @@
                 <div class="input-group">
                     <label for="realm_msg_delete_limit_setting" class="dropdown-title">
                         {{t "Allow message deleting" }}
-                        <i class="fa fa-info-circle settings-info-icon realm_allow_message_deleting_tooltip" data-toggle="tooltip"
-                          aria-hidden="true" title="{{t 'Administrators can always delete any message.' }}"></i>
+                        <i class="fa fa-info-circle settings-info-icon realm_allow_message_deleting_tooltip tippy-zulip-tooltip"
+                          aria-hidden="true" data-tippy-content="{{t 'Administrators can always delete any message.' }}"></i>
                     </label>
                     <select name="realm_msg_delete_limit_setting" id="id_realm_msg_delete_limit_setting" class="prop-element">
                         {{#each msg_delete_limit_dropdown_values}}
@@ -153,8 +153,8 @@
             <div class="inline-block organization-settings-parent">
                 <div class="input-group">
                     <label for="id_realm_message_retention_setting" class="dropdown-title">{{t "Message retention period" }}
-                        <i class="fa fa-info-circle settings-info-icon realm_allow_message_deleting_tooltip" data-toggle="tooltip"
-                          aria-hidden="true" title="{{t 'Only owners can change message retention policy.' }}"></i>
+                        <i class="fa fa-info-circle settings-info-icon realm_allow_message_deleting_tooltip tippy-zulip-tooltip"
+                          aria-hidden="true" data-tippy-content="{{t 'Only owners can change message retention policy.' }}"></i>
                     </label>
                     <select name="realm_message_retention_setting"
                       id="id_realm_message_retention_setting" class="prop-element"