message_view: Add js tooltip hovers for emoji reactions.

This removes HTML title hovers for emoji reaction buttons below messages
and replaces them with js tooltips.

Fixes #8679.

frontend_tests/node_tests/reactions.js

@@ -161,7 +161,7 @@ run_test('basics', () => {
             local_id: 'unicode_emoji,frown,1f626',
             count: 1,
             user_ids: [7],
-            title: 'Cali reacted with :frown:',
+            label: 'Cali reacted with :frown:',
             emoji_alt_code: false,
             class: 'message_reaction',
         },
@@ -172,7 +172,7 @@ run_test('basics', () => {
             local_id: 'realm_emoji,inactive_realm_emoji,992',
             count: 1,
             user_ids: [5],
-            title: 'You (click to remove) reacted with :inactive_realm_emoji:',
+            label: 'You (click to remove) reacted with :inactive_realm_emoji:',
             emoji_alt_code: false,
             is_realm_emoji: true,
             url: 'TBD',
@@ -185,7 +185,7 @@ run_test('basics', () => {
             local_id: 'unicode_emoji,smile,1f604',
             count: 2,
             user_ids: [5, 6],
-            title: 'You (click to remove) and Bob van Roberts reacted with :smile:',
+            label: 'You (click to remove) and Bob van Roberts reacted with :smile:',
             emoji_alt_code: false,
             class: 'message_reaction reacted',
         },
@@ -299,6 +299,14 @@ run_test('get_reaction_section', () => {
     assert.equal(section, message_reactions);
 });
 
+run_test('emoji_reaction_title', () => {
+    var message_id = 1001;
+    var local_id = 'unicode_emoji,smile,1f604';
+
+    assert.equal(reactions.get_reaction_title_data(message_id, local_id),
+                 "You (click to remove) and Bob van Roberts reacted with :smile:");
+});
+
 run_test('add_and_remove_reaction', () => {
     // Insert 8ball for Alice.
     var alice_event = {
@@ -330,7 +338,7 @@ run_test('add_and_remove_reaction', () => {
         assert.equal(data.class, 'message_reaction reacted');
         assert(!data.is_realm_emoji);
         assert.equal(data.message_id, 1001);
-        assert.equal(data.title, 'You (click to remove) reacted with :8ball:');
+        assert.equal(data.label, 'You (click to remove) reacted with :8ball:');
         return '<new reaction html>';
     });
 
@@ -344,6 +352,11 @@ run_test('add_and_remove_reaction', () => {
     assert(template_called);
     assert(insert_called);
 
+    // Testing tooltip title data for added reaction.
+    var local_id = 'unicode_emoji,8ball,1f3b1';
+    assert.equal(reactions.get_reaction_title_data(alice_event.message_id, local_id),
+                 "You (click to remove) reacted with :8ball:");
+
     // Running add_reaction again should not result in any changes
     template_called = false;
     insert_called = false;
@@ -367,36 +380,15 @@ run_test('add_and_remove_reaction', () => {
     var reaction_element = $.create('reaction-element');
     reaction_element.set_find_results('.message_reaction_count', count_element);
 
-    var title_set;
-    reaction_element.prop = function (prop_name, value) {
-        assert.equal(prop_name, 'title');
-        var expected_msg = 'You (click to remove)' +
-            ' and Bob van Roberts reacted with :8ball:';
-        assert.equal(value, expected_msg);
-        title_set = true;
-    };
-
     message_reactions.find = function (selector) {
         assert.equal(selector, "[data-reaction-id='unicode_emoji,8ball,1f3b1']");
         return reaction_element;
     };
 
     reactions.add_reaction(bob_event);
-    assert(title_set);
     assert.equal(count_element.text(), '2');
 
-    // Now, remove Bob's 8ball emoji.  The event has the same exact
-    // structure as the add event.
-    title_set = false;
-    reaction_element.prop = function (prop_name, value) {
-        assert.equal(prop_name, 'title');
-        var expected_msg = 'You (click to remove) reacted with :8ball:';
-        assert.equal(value, expected_msg);
-        title_set = true;
-    };
-
     reactions.remove_reaction(bob_event);
-    assert(title_set);
     assert.equal(count_element.text(), '1');
 
     var current_emojis = reactions.get_emojis_used_by_user_for_message_id(1001);

static/js/click_handlers.js

@@ -189,6 +189,40 @@ exports.initialize = function () {
         var local_id = $(this).attr('data-reaction-id');
         var message_id = rows.get_message_id(this);
         reactions.process_reaction_click(message_id, local_id);
+        $(".tooltip").remove();
+    });
+
+    // TOOLTIP FOR MESSAGE REACTIONS
+
+    $('#main_div').on('mouseenter', '.message_reaction', function (e) {
+        e.stopPropagation();
+        var elem = $(e.currentTarget);
+        var local_id = elem.attr('data-reaction-id');
+        var message_id = rows.get_message_id(e.currentTarget);
+        var title = reactions.get_reaction_title_data(message_id, local_id);
+
+        elem.tooltip({
+            title: title,
+            trigger: 'hover',
+            placement: 'bottom',
+            animation: false,
+        });
+        elem.tooltip('show');
+        $(".tooltip, .tooltip-inner").css('max-width', "600px");
+        // Remove the arrow from the tooltip.
+        $(".tooltip-arrow").remove();
+    });
+
+    $('#main_div').on('mouseleave', '.message_reaction', function (e) {
+        e.stopPropagation();
+        $(e.currentTarget).tooltip('destroy');
+    });
+
+    // DESTROY PERSISTING TOOLTIPS ON HOVER
+
+    $("body").on('mouseenter', '.tooltip', function (e) {
+        e.stopPropagation();
+        $(e.currentTarget).remove();
     });
 
     $("#main_div").on("click", "a.stream", function (e) {

static/js/emoji_picker.js

@@ -696,7 +696,7 @@ exports.register_click_handlers = function () {
     $("#main_div").on("mouseenter", ".reaction_button", function (e) {
         e.stopPropagation();
 
-        var elem = $(this);
+        var elem = $(e.currentTarget);
         var title = i18n.t("Add emoji reaction");
         elem.tooltip({
             title: title + " (:)",
@@ -710,7 +710,7 @@ exports.register_click_handlers = function () {
 
     $('#main_div').on('mouseleave', '.reaction_button', function (e) {
         e.stopPropagation();
-        $(this).tooltip('hide');
+        $(e.currentTarget).tooltip('hide');
     });
 
     $("body").on("click", ".actions_popover .reaction_button", function (e) {

static/js/reactions.js

@@ -172,6 +172,16 @@ function generate_title(emoji_name, user_ids) {
     return _.initial(user_names).join(', ') + ' and ' + _.last(user_names) + reacted_with_string;
 }
 
+// Add a tooltip showing who reacted to a message.
+exports.get_reaction_title_data = function (message_id, local_id) {
+    var message = get_message(message_id);
+    var user_list = get_user_list_for_message_reaction(message, local_id);
+    var emoji_name = exports.get_reaction_info(local_id).emoji_name;
+    var title = generate_title(emoji_name, user_list);
+
+    return title;
+};
+
 exports.get_reaction_section = function (message_id) {
     var message_element = $('.message_table').find("[zid='" + message_id + "']");
     var section = message_element.find('.message_reactions');
@@ -249,8 +259,8 @@ exports.view.update_existing_reaction = function (opts) {
 
     exports.set_reaction_count(reaction, user_list.length);
 
-    var new_title = generate_title(emoji_name, user_list);
-    reaction.prop('title', new_title);
+    var new_label = generate_title(emoji_name, user_list);
+    reaction.attr('aria-label', new_label);
 
     if (user_id === page_params.user_id) {
         reaction.addClass("reacted");
@@ -275,7 +285,7 @@ exports.view.insert_new_reaction = function (opts) {
         emoji_code: emoji_code,
     };
 
-    var new_title = generate_title(emoji_name, user_list);
+    var new_label = generate_title(emoji_name, user_list);
 
     if (opts.reaction_type !== 'unicode_emoji') {
         context.is_realm_emoji = true;
@@ -283,7 +293,7 @@ exports.view.insert_new_reaction = function (opts) {
     }
 
     context.count = 1;
-    context.title = new_title;
+    context.label = new_label;
     context.local_id = exports.get_local_reaction_id(opts);
     context.emoji_alt_code = page_params.emojiset === 'text';
 
@@ -369,8 +379,10 @@ exports.view.remove_reaction = function (opts) {
     // the title/count and, if the user is the current user, turn off the
     // "reacted" class.
 
-    var new_title = generate_title(emoji_name, user_list);
-    reaction.prop('title', new_title);
+    var new_label = generate_title(emoji_name, user_list);
+    reaction.attr('aria-label', new_label);
+
+    // If the user is the current user, turn off the "reacted" class.
 
     exports.set_reaction_count(reaction, user_list.length);
 
@@ -414,7 +426,7 @@ exports.get_message_reactions = function (message) {
         reaction.emoji_name = reaction.emoji_name;
         reaction.emoji_code = reaction.emoji_code;
         reaction.count = reaction.user_ids.length;
-        reaction.title = generate_title(reaction.emoji_name, reaction.user_ids);
+        reaction.label = generate_title(reaction.emoji_name, reaction.user_ids);
         reaction.emoji_alt_code = page_params.emojiset === 'text';
 
         if (reaction.reaction_type !== 'unicode_emoji') {

static/templates/message_reaction.hbs

@@ -1,4 +1,4 @@
-<div class="{{this.class}}" title="{{this.title}}" data-reaction-id={{this.local_id}}>
+<div class="{{this.class}}" aria-label="{{this.label}}" data-reaction-id={{this.local_id}}>
     {{#if this.emoji_alt_code}}
         <div class="emoji_alt_code">&nbsp:{{this.emoji_name}}:</div>
     {{else}}