tooltips: Add a dedicated tooltip for status-emoji.

Fixes: #26772

web/src/click_handlers.js

@@ -573,6 +573,27 @@ export function initialize() {
             get_target_node,
             check_reference_removed,
         );
+
+        /*
+           The following implements a little tooltip giving the name for status emoji
+           when hovering them in the right sidebar. This requires special logic, to avoid
+           conflicting with the main tooltip or showing duplicate tooltips.
+        */
+        $(".user-presence-link .status-emoji-name").off("mouseenter").off("mouseleave");
+        $(".user-presence-link .status-emoji-name").on("mouseenter", () => {
+            const instance = $elem.parent()[0]._tippy;
+            if (instance && instance.state.isVisible) {
+                instance.destroy();
+            }
+        });
+        $(".user-presence-link .status-emoji-name").on("mouseleave", () => {
+            do_render_buddy_list_tooltip(
+                $elem.parent(),
+                title_data,
+                get_target_node,
+                check_reference_removed,
+            );
+        });
     });
 
     // DIRECT MESSAGE LIST TOOLTIPS (not displayed on touch devices)
@@ -606,6 +627,27 @@ export function initialize() {
             check_reference_removed,
             check_subtree,
         );
+
+        /*
+           The following implements a little tooltip giving the name for status emoji
+           when hovering them in the left sidebar. This requires special logic, to avoid
+           conflicting with the main tooltip or showing duplicate tooltips.
+        */
+        $(".dm-user-status .status-emoji-name").off("mouseenter").off("mouseleave");
+        $(".dm-user-status .status-emoji-name").on("mouseenter", () => {
+            const instance = $elem[0]._tippy;
+            if (instance && instance.state.isVisible) {
+                instance.destroy();
+            }
+        });
+        $(".dm-user-status .status-emoji-name").on("mouseleave", () => {
+            do_render_buddy_list_tooltip(
+                $elem,
+                title_data,
+                get_target_node,
+                check_reference_removed,
+            );
+        });
     });
 
     // Recent conversations direct messages (Not displayed on small widths)

web/src/tippyjs.ts

@@ -5,6 +5,7 @@ import tippy, {delegate} from "tippy.js";
 import render_tooltip_templates from "../templates/tooltip_templates.hbs";
 
 import {$t} from "./i18n";
+import * as popovers from "./popovers";
 import {user_settings} from "./user_settings";
 
 // For tooltips without data-tippy-content, we use the HTML content of
@@ -506,6 +507,29 @@ export function initialize(): void {
         appendTo: () => document.body,
     });
 
+    delegate("body", {
+        target: ".status-emoji-name",
+        placement: "top",
+        delay: INSTANT_HOVER_DELAY,
+        appendTo: () => document.body,
+
+        /*
+            Status emoji tooltips for most locations in the app. This
+            basic tooltip logic is overridden by separate logic in
+            click_handlers.js for the left and right sidebars, to
+            avoid problematic interactions with the main tooltips for
+            those regions.
+        */
+
+        onShow() {
+            popovers.hide_all();
+        },
+
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
+
     delegate("body", {
         /*
             The tooltip for new user group button (+) icon button on #groups

web/templates/status_emoji.hbs

@@ -2,11 +2,11 @@
 {{#if emoji_alt_code}}
 <span class="emoji_alt_code">&nbsp;:{{emoji_name}}:</span>
 {{else if still_url}}
-<img src="{{still_url}}" class="emoji status-emoji" data-animated-url="{{url}}" data-still-url="{{still_url}}" />
+<img src="{{still_url}}" class="emoji status-emoji status-emoji-name" data-animated-url="{{url}}" data-still-url="{{still_url}}" data-tippy-content=":{{emoji_name}}:" />
 {{else if url}}
 {{!-- note that we have no still_url --}}
-<img src="{{url}}" class="emoji status-emoji" data-animated-url="{{url}}" />
+<img src="{{url}}" class="emoji status-emoji status-emoji-name" data-animated-url="{{url}}" data-tippy-content=":{{emoji_name}}:" />
-{{else if emoji_code}}
+{{else if emoji_name}}
-<span class="emoji status-emoji emoji-{{emoji_code}}"></span>
+<span class="emoji status-emoji status-emoji-name emoji-{{emoji_code}}" data-tippy-content=":{{emoji_name}}:"></span>
 {{/if}}
 {{/if}}