From 0e32454b1d68a4be438e9297ce24979a23910277 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 24 Mar 2021 17:41:55 +0000
Subject: [PATCH] message_reaction: Calculate and render tooltip using tippyjs.

Tippyjs automatically places it to bottom.

NOTE: placement of tooltip is changed from 'bottom' to `auto`.
Custom css was set here to avoid tooltip being partially hidden
on small screens. This change automatically takes care of it
by showing the tooltip on right side of message_reaction on
small screens if it is partially hidden from the left or
vice versa.
---
 static/js/click_handlers.js | 36 ------------------------------------
 static/js/tippyjs.js        | 16 ++++++++++++++++
 2 files changed, 16 insertions(+), 36 deletions(-)

diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index c09f40613c..2048aaa26a 100644
--- a/static/js/click_handlers.js
+++ b/static/js/click_handlers.js
@@ -235,42 +235,6 @@ export function initialize() {
         e.preventDefault();
     });
 
-    // TOOLTIP FOR MESSAGE REACTIONS
-
-    $("#main_div").on("mouseenter", ".message_reaction", (e) => {
-        e.stopPropagation();
-        const elem = $(e.currentTarget);
-        const local_id = elem.attr("data-reaction-id");
-        const message_id = rows.get_message_id(e.currentTarget);
-        const title = reactions.get_reaction_title_data(message_id, local_id);
-
-        elem.tooltip({
-            title,
-            trigger: "hover",
-            placement: "bottom",
-            animation: false,
-        });
-        elem.tooltip("show");
-        $(".tooltip, .tooltip-inner").css({
-            "margin-left": "15px",
-            "max-width": $(window).width() * 0.6,
-        });
-        // Remove the arrow from the tooltip.
-        $(".tooltip-arrow").remove();
-    });
-
-    $("#main_div").on("mouseleave", ".message_reaction", (e) => {
-        e.stopPropagation();
-        $(e.currentTarget).tooltip("destroy");
-    });
-
-    // DESTROY PERSISTING TOOLTIPS ON HOVER
-
-    $("body").on("mouseenter", ".tooltip", (e) => {
-        e.stopPropagation();
-        $(e.currentTarget).remove();
-    });
-
     $("#main_div").on("click", "a.stream", function (e) {
         e.preventDefault();
         // Note that we may have an href here, but we trust the stream id more,
diff --git a/static/js/tippyjs.js b/static/js/tippyjs.js
index 650c6a0ddf..4991e24090 100644
--- a/static/js/tippyjs.js
+++ b/static/js/tippyjs.js
@@ -1,5 +1,9 @@
+import $ from "jquery";
 import tippy, {delegate} from "tippy.js";
 
+import * as reactions from "./reactions";
+import * as rows from "./rows";
+
 // We override the defaults set by tippy library here,
 // so make sure to check this too after checking tippyjs
 // documentation for default properties.
@@ -37,4 +41,16 @@ export function initialize() {
         // show tippy styled tooltip on hover.
         target: ".tippy-zulip-tooltip",
     });
+
+    // message reaction tooltip showing who reacted.
+    delegate("body", {
+        target: ".message_reaction",
+        onShow(instance) {
+            const elem = $(instance.reference);
+            const local_id = elem.attr("data-reaction-id");
+            const message_id = rows.get_message_id(instance.reference);
+            const title = reactions.get_reaction_title_data(message_id, local_id);
+            instance.setContent(title);
+        },
+    });
 }