message_view: Add a js tooltip hover for reaction button.

This change removes the html title for the reaction button
and replaces it with a JS Tooltip with the same title text.
This commit is contained in:
vinitS101 2019-04-04 18:02:56 +05:30 committed by Tim Abbott
parent c5a4b0501b
commit 278ccc559b
2 changed files with 21 additions and 1 deletions

View File

@ -693,6 +693,26 @@ exports.register_click_handlers = function () {
emoji_picker.toggle_emoji_popover(this, message_id);
});
$("#main_div").on("mouseenter", ".reaction_button", function (e) {
e.stopPropagation();
var elem = $(this);
var title = i18n.t("Add emoji reaction");
elem.tooltip({
title: title + " (:)",
trigger: 'hover',
placement: 'bottom',
animation: false,
});
elem.tooltip('show');
$(".tooltip-arrow").remove();
});
$('#main_div').on('mouseleave', '.reaction_button', function (e) {
e.stopPropagation();
$(this).tooltip('hide');
});
$("body").on("click", ".actions_popover .reaction_button", function (e) {
var msgid = $(e.currentTarget).data('message-id');
e.preventDefault();

View File

@ -1,7 +1,7 @@
{{#each this/msg/message_reactions}}
{{> message_reaction}}
{{/each}}
<div class="reaction_button" title="{{t 'Add emoji reaction' }} (:)">
<div class="reaction_button" aria-label="{{t 'Add emoji reaction' }} (:)">
<i class="fa fa-smile-o" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Add emoji reaction' }} (:)"></i>
<div class="message_reaction_count">+</div>
</div>