tooltips: Use TippyJS for all message_control_button tooltips.

The inconsistent style between these three buttons looked bad.

We have to take some care with the "Starred messages" and "Edit" ones,
to make sure they live-update properly.

static/js/tippyjs.js

@@ -70,4 +70,29 @@ export function initialize() {
         // them unless they want to.
         delay: [300, 20],
     });
+
+    delegate("body", {
+        target: ".message_control_button",
+        placement: "top",
+        // Add some additional delay when they open
+        // so that regular users don't have to see
+        // them unless they want to.
+        delay: [300, 20],
+        onShow(instance) {
+            // Handle dynamic "starred messages" and "edit" widgets.
+            const elem = $(instance.reference);
+            let content = elem.attr("data-tippy-content");
+            if (content === undefined) {
+                // Tippy cannot get the content for message edit button
+                // as it is dynamically inserted based on editability.
+                // So, we have to manually get the i element to get the
+                // content from it.
+                //
+                // TODO: Change the template structure so logic is unnecessary.
+                const edit_button = elem.find("i.edit_content_button").expectOne();
+                content = edit_button.attr("data-tippy-content");
+            }
+            instance.setContent(content);
+        },
+    });
 }

static/js/ui.js

@@ -82,8 +82,8 @@ export function update_starred_view(message_id, new_value) {
             star_container.addClass("empty-star");
         }
         const title_state = starred ? $t({defaultMessage: "Unstar"}) : $t({defaultMessage: "Star"});
-        elt.attr(
+        star_container.attr(
-            "title",
+            "data-tippy-content",
             $t(
                 {defaultMessage: "{starred_status} this message (Ctrl + s)"},
                 {starred_status: title_state},

static/templates/edit_content_button.hbs

@@ -1,5 +1,5 @@
 {{#if is_editable}}
-<i class="fa fa-pencil edit_content_button" role="button" tabindex="0" aria-label="{{t 'Edit' }} (e)" title="{{t 'Edit' }} (e)"></i>
+<i class="fa fa-pencil edit_content_button" role="button" tabindex="0" aria-label="{{t 'Edit' }} (e)" data-tippy-content="{{#tr}}Edit{{/tr}} (e)"></i>
 {{else}}
-<i class="fa fa-file-code-o edit_content_button" role="button" tabindex="0" aria-label="{{t 'View source' }} (e)" title="{{t 'View source' }} (e)" data-message-id="{{msg_id}}"></i>
+<i class="fa fa-file-code-o edit_content_button" role="button" tabindex="0" aria-label="{{t 'View source' }} (e)" data-tippy-content="{{#tr}}View source{{/tr}} (e)" data-message-id="{{msg_id}}"></i>
 {{/if}}

static/templates/message_controls.hbs

@@ -4,14 +4,14 @@
     {{/if}}
 
     {{#unless msg/sent_by_me}}
-    <div class="reaction_button message_control_button tippy-zulip-tooltip" data-tippy-content="{{t 'Add emoji reaction' }} (:)">
+    <div class="reaction_button message_control_button" data-tippy-content="{{t 'Add emoji reaction' }} (:)">
         <i class="fa fa-smile-o" aria-label="{{#tr}}Add emoji reaction{{/tr}} (:)" role="button" aria-haspopup="true" tabindex="0"></i>
     </div>
     {{/unless}}
 
     {{#unless msg/locally_echoed}}
-    <div class="info actions_hover message_control_button">
+    <div class="info actions_hover message_control_button" data-tippy-content="{{#tr}}Message actions{{/tr}} (i)" >
-        <i class="zulip-icon zulip-icon-ellipsis-v-solid" title="{{#tr}}Message actions{{/tr}} (i)" role="button" aria-haspopup="true" tabindex="0" aria-label="{{#tr}}Message actions{{/tr}}"></i>
+        <i class="zulip-icon zulip-icon-ellipsis-v-solid" role="button" aria-haspopup="true" tabindex="0" aria-label="{{#tr}}Message actions{{/tr}}"></i>
     </div>
     {{/unless}}
 
@@ -21,8 +21,8 @@
     </div>
 
     {{#unless msg/locally_echoed}}
-    <div class="star_container message_control_button {{#if msg/starred}}{{else}}empty-star{{/if}}">
+    <div class="star_container message_control_button {{#if msg/starred}}{{else}}empty-star{{/if}}" data-tippy-content="{{#with msg}}{{#tr}}{starred_status} this message{{/tr}}{{/with}} (Ctrl + s)">
-        <i role="button" tabindex="0" class="star fa {{#if msg/starred}}fa-star{{else}}fa-star-o{{/if}}" title="{{#with msg}}{{#tr}}{starred_status} this message{{/tr}}{{/with}} (Ctrl + s)"></i>
+        <i role="button" tabindex="0" class="star fa {{#if msg/starred}}fa-star{{else}}fa-star-o{{/if}}"></i>
     </div>
     {{/unless}}