user profiles: add tooltip for too long email.

static/js/popovers.js

@@ -477,6 +477,15 @@ exports.register_click_handlers = function () {
         current_user_sidebar_user_id = user_id;
         current_user_sidebar_popover = target.data('popover');
 
+        $('.my_email').hover(function () {
+            var 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', function (e) {

static/styles/zulip.css

@@ -2649,3 +2649,49 @@ button.topic_edit_cancel {
     -webkit-user-select: none;
     -ms-user-select: none;
 }
+
+.my_email {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.my_email .tooltip_holder {
+    display: none;
+    position: absolute;
+    left: 50%;
+}
+
+.display-tooltip {
+    display: block !important;
+}
+
+.email_tooltip {
+    visibility: hidden;
+    opacity: 0;
+    position: relative;
+    padding: 5px 8px;
+    left: -50%;
+    top: 10px;
+    border-radius: 6px;
+    background-color: #4c4c4c;
+    color: #fff;
+    transition: visibility 0.2s ease-out, opacity 0.2s linear;
+}
+
+.email_tooltip::after {
+    content: "";
+    position: absolute;
+    top: -47%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 7px;
+    border-style: solid;
+    border-color: transparent;
+    border-bottom: #4c4c4c solid 7px;
+}
+
+.my_email:hover .email_tooltip {
+    visibility: visible;
+    opacity: 1;
+}

static/templates/user_info_popover_content.handlebars

@@ -13,7 +13,12 @@
         </li>
 
         {{#if is_active }}
-        <li class='my_email'>{{user_email}}</li>
+        <li class='my_email'>
+            {{ user_email }}
+            <div class="tooltip_holder">
+                <span class="email_tooltip">{{ user_email }}</span>
+            </div>
+        </li>
         {{else}}
         <li class='my_email half-opacity italic'>{{#tr this}}(This user has been deactivated){{/tr}}</li>
         {{/if}}