settings-account: Move tooltip for email change disabled to button.

Moves the tooltip when email changes are disabled to be shown on
hovering over the email button text and pencil icon. Removes the
question icon that previously showed the tooltip on hover.

static/js/settings_account.js

@@ -62,10 +62,10 @@ export function update_name_change_display() {
 export function update_email_change_display() {
     if (!settings_data.user_can_change_email()) {
         $("#change_email_button").prop("disabled", true);
-        $(".change_email_tooltip").show();
+        $("#change_email_button_container").addClass("email_changes_disabled_tooltip");
     } else {
         $("#change_email_button").prop("disabled", false);
-        $(".change_email_tooltip").hide();
+        $("#change_email_button_container").removeClass("email_changes_disabled_tooltip");
     }
 }
 

static/js/tippyjs.js

@@ -398,6 +398,15 @@ export function initialize() {
         },
     });
 
+    delegate("body", {
+        target: ["#change_email_button_container.email_changes_disabled_tooltip"],
+        content: $t({defaultMessage: "Email address changes are disabled in this organization."}),
+        appendTo: () => document.body,
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
+
     delegate("body", {
         target: "#pm_tooltip_container",
         onShow(instance) {

static/styles/settings.css

@@ -50,7 +50,6 @@ h3,
     }
 }
 
-.email-change-form,
 .user-name-section {
     .settings-info-icon {
         position: relative;
@@ -161,6 +160,18 @@ h3,
     }
 }
 
+#change_email_button_container {
+    &.email_changes_disabled_tooltip {
+        cursor: not-allowed;
+    }
+}
+
+#change_email_button {
+    &:disabled {
+        pointer-events: none;
+    }
+}
+
 #change_password_modal,
 #change_email_modal {
     max-width: 480px;

static/templates/settings/account_settings.hbs

@@ -5,15 +5,15 @@
             <div id="user_details_section">
                 <h3 class="inline-block">{{t "Account" }}</h3>
                 <div class="alert-notification" id="account-settings-status"></div>
-                <form class="email-change-form grid">
+                <form class="grid">
                     <div class="input-group">
                         <label class="inline-block title">{{t "Email" }}</label>
-                        <button id="change_email_button" type="button" class="button btn-link small rounded inline-block" {{#unless user_can_change_email}}disabled="disabled"{{/unless}}>
-                            {{page_params.delivery_email}}
-                            <i class="fa fa-pencil"></i>
-                        </button>
-                        <i class="tippy-zulip-tooltip fa fa-question-circle change_email_tooltip settings-info-icon" {{#if user_can_change_email}}style="display: none;"{{/if}} data-tippy-content="{{t 'Email address changes are disabled in this organization.' }}">
-                        </i>
+                        <div id="change_email_button_container" class="inline-block {{#unless user_can_change_email}}email_changes_disabled_tooltip{{/unless}}">
+                            <button id="change_email_button" type="button" class="button btn-link small rounded inline-block" {{#unless user_can_change_email}}disabled="disabled"{{/unless}}>
+                                {{page_params.delivery_email}}
+                                <i class="fa fa-pencil"></i>
+                            </button>
+                        </div>
                     </div>
                 </form>