user_popover: Replace custom email tooltip with tippy tooltip.

This commit essentially migrates our custom email tooltip
to tippy tooltip for displaying user's email when their
names would overflow past the right edge of user popover.

This also removes the `email_tooltip` and `tooltip_holder` HTML
classes aloong with their CSS styles as they no longer used.

static/js/popovers.js

@@ -2,7 +2,7 @@ import ClipboardJS from "clipboard";
 import {add, formatISO, set} from "date-fns";
 import ConfirmDatePlugin from "flatpickr/dist/plugins/confirmDate/confirmDate";
 import $ from "jquery";
-import {hideAll} from "tippy.js";
+import tippy, {hideAll} from "tippy.js";
 
 import render_actions_popover_content from "../templates/actions_popover_content.hbs";
 import render_no_arrow_popover from "../templates/no_arrow_popover.hbs";
@@ -137,6 +137,24 @@ function init_email_clipboard() {
     });
 }
 
+function init_email_tooltip(user) {
+    /*
+        This displays the email tooltip for folks
+        who have names that would overflow past the right
+        edge of our user mention popup.
+    */
+
+    $(".user_popover_email").each(function () {
+        if (this.clientWidth < this.scrollWidth) {
+            tippy(this, {
+                placement: "bottom",
+                content: people.get_visible_email(user),
+                interactive: true,
+            });
+        }
+    });
+}
+
 function load_medium_avatar(user, elt) {
     const avatar_path = "avatar/" + user.user_id + "/medium?v=" + user.avatar_version;
     const user_avatar_url = new URL(avatar_path, window.location.href);
@@ -244,6 +262,8 @@ function render_user_info_popover(
     popover_element.popover("show");
 
     init_email_clipboard();
+    init_email_tooltip(user);
+
     load_medium_avatar(user, $(".popover-avatar"));
 }
 
@@ -1010,16 +1030,6 @@ export function register_click_handlers() {
         current_user_sidebar_popover = target.data("popover");
     });
 
-    $("body").on("mouseenter", ".user_popover_email", function () {
-        const tooltip_holder = $(this).find("div");
-
-        if (this.offsetWidth < this.scrollWidth) {
-            tooltip_holder.addClass("display-tooltip");
-        } else {
-            tooltip_holder.removeClass("display-tooltip");
-        }
-    });
-
     $("body").on("click", ".respond_button", (e) => {
         // Arguably, we should fetch the message ID to respond to from
         // e.target, but that should always be the current selected

static/styles/night_mode.css

@@ -1033,14 +1033,6 @@ on a dark background, and don't change the dark labels dark either. */
         border: 1px solid 1px solid hsl(144, 45%, 62%);
     }
 
-    .email_tooltip {
-        background-color: hsl(211, 16%, 30%);
-    }
-
-    .email_tooltip::after {
-        border-bottom-color: hsl(211, 16%, 30%) !important;
-    }
-
     #bots_lists_navbar .active a {
         color: hsl(0, 0%, 87%);
         background-color: hsl(212, 28%, 18%);

static/styles/zulip.css

@@ -2599,17 +2599,6 @@ div.topic_edit_spinner .loading_indicator_spinner {
     overflow: hidden;
     transition: all 0.4s ease;
 
-    &:hover .email_tooltip {
-        visibility: visible;
-        opacity: 1;
-    }
-
-    .tooltip_holder {
-        display: none;
-        position: absolute;
-        left: 50%;
-    }
-
     i {
         cursor: pointer;
 
@@ -2632,31 +2621,6 @@ div.topic_edit_spinner .loading_indicator_spinner {
     display: block !important;
 }
 
-.email_tooltip {
-    visibility: hidden;
-    opacity: 0;
-    position: relative;
-    padding: 5px 8px;
-    left: -50%;
-    top: 10px;
-    border-radius: 6px;
-    background-color: hsl(0, 0%, 30%);
-    color: hsl(0, 0%, 100%);
-    transition: visibility 0.2s ease-out, opacity 0.2s linear;
-
-    ::after {
-        content: "";
-        position: absolute;
-        top: -47%;
-        left: 50%;
-        margin-left: -5px;
-        border-width: 7px;
-        border-style: solid;
-        border-color: transparent;
-        border-bottom: hsl(0, 0%, 30%) solid 7px;
-    }
-}
-
 .hotkey-hint {
     opacity: 0.75;
 }

static/templates/user_info_popover_content.hbs

@@ -15,13 +15,13 @@
 
         {{#if is_active }}
             {{#if show_email}}
-            <li class="user_popover_email">
-                <i class="fa fa-clone hide_copy_icon" data-clipboard-text="{{ user_email }}"></i>
-                {{ user_email }}
-                <div class="tooltip_holder">
-                    <span class="email_tooltip">{{ user_email }}</span>
-                </div>
-            </li>
+            {{!-- This div is added to enable interactivity for tooltip - https://atomiks.github.io/tippyjs/v5/accessibility/#interactivity --}}
+            <div>
+                <li class="user_popover_email">
+                    <i class="fa fa-clone hide_copy_icon" data-clipboard-text="{{ user_email }}"></i>
+                    {{ user_email }}
+                </li>
+            </div>
             {{/if}}
         {{else}}
             <li class="user_popover_email half-opacity italic">{{#tr}}(This user has been deactivated){{/tr}}</li>