message: Convert `view user card` to a tippy tooltip.

static/js/tippyjs.js

@@ -472,4 +472,13 @@ export function initialize() {
         }),
         appendTo: () => document.body,
     });
+
+    delegate("body", {
+        target: ".view_user_card_tooltip",
+        content: $t({
+            defaultMessage: "View user card (u)",
+        }),
+        delay: [500, 20],
+        appendTo: () => document.body,
+    });
 }

static/templates/me_message.hbs

@@ -7,7 +7,7 @@
 
     <span class="sender-status">
         <span class="sender_info_hover sender_name-in-status auto-select" role="button" tabindex="0">
-            <span title="{{t 'View user card' }} (u)" >
+            <span class="view_user_card_tooltip">
                 {{msg/sender_full_name}}
             </span>
         </span>

static/templates/message_avatar.hbs

@@ -1,4 +1,4 @@
-<div class="u-{{msg/sender_id}} inline_profile_picture {{#sender_is_guest}} guest-avatar{{/sender_is_guest}}" aria-hidden="true" title="{{t 'View user card' }} (u)">
+<div class="u-{{msg/sender_id}} inline_profile_picture {{#sender_is_guest}} guest-avatar{{/sender_is_guest}} view_user_card_tooltip" aria-hidden="true">
     <img src="{{small_avatar_url}}" alt="" class="no-drag"/>
 </div>
 {{~! remove whitespace ~}}

static/templates/message_body.hbs

@@ -3,7 +3,7 @@
     {{#if include_sender}}
     <span>
         {{> message_avatar ~}}
-        <span class="sender_name auto-select" role="button" tabindex="0" title="{{t 'View user card' }} (u)">{{msg/sender_full_name}}{{> status_emoji msg/status_emoji_info}}</span>
+        <span class="sender_name auto-select view_user_card_tooltip" role="button" tabindex="0">{{msg/sender_full_name}}{{> status_emoji msg/status_emoji_info}}</span>
         {{#if sender_is_bot}}
         <i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
         {{/if}}