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/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);
+        },
+    });
 }