markdown: Rewrite tooltips for <time> elements.

This now uses TippyJS, which enables a more friendly format.

frontend_tests/node_tests/rendered_markdown.js

@@ -254,6 +254,11 @@ run_test("timestamp", ({mock_template}) => {
         return html;
     });
 
+    mock_template("markdown_time_tooltip.hbs", true, (data, html) => {
+        assert.deepEqual(data, {tz_offset_str: "UTC"});
+        return html;
+    });
+
     // Setup
     const $content = get_content_element();
     const $timestamp = $.create("timestamp(valid)");
@@ -272,8 +277,8 @@ run_test("timestamp", ({mock_template}) => {
     // Final asserts
     assert.equal($timestamp.html(), '<i class="fa fa-clock-o"></i>\nThu, Jan 1 1970, 12:00 AM\n');
     assert.equal(
-        $timestamp.attr("title"),
-        "This time is in your timezone. Original text was 'never-been-set'.",
+        $timestamp.attr("data-tippy-content"),
+        "Everyone sees this in their own timezone.\n<br/>\nYour time zone: UTC\n",
     );
     assert.equal($timestamp_invalid.text(), "never-been-set");
 });
@@ -285,6 +290,10 @@ run_test("timestamp-twenty-four-hour-time", ({mock_template}) => {
         return html;
     });
 
+    mock_template("markdown_time_tooltip.hbs", false, (data) => {
+        assert.deepEqual(data, {tz_offset_str: "UTC"});
+    });
+
     const $content = get_content_element();
     const $timestamp = $.create("timestamp");
     $timestamp.attr("datetime", "2020-07-15T20:40:00Z");

static/js/rendered_markdown.js

@@ -169,7 +169,7 @@ export const update_elements = (content) => {
                 text: rendered_time.text,
             });
             $(this).html(rendered_timestamp);
-            $(this).attr("title", rendered_time.title);
+            $(this).attr("data-tippy-content", rendered_time.tooltip_content);
         } else {
             // This shouldn't happen. If it does, we're very interested in debugging it.
             blueslip.error(`Could not parse datetime supplied by backend: ${time_str}`);

static/js/timerender.js

@@ -11,6 +11,8 @@ import {
 import $ from "jquery";
 import _ from "lodash";
 
+import render_markdown_time_tooltip from "../templates/markdown_time_tooltip.hbs";
+
 import {$t} from "./i18n";
 import {page_params} from "./page_params";
 
@@ -203,13 +205,16 @@ export function render_date(time, time_above, today) {
 }
 
 // Renders the timestamp returned by the <time:> Markdown syntax.
-export function render_markdown_timestamp(time, text) {
+export function render_markdown_timestamp(time) {
     const hourformat = page_params.twenty_four_hour_time ? "HH:mm" : "h:mm a";
     const timestring = format(time, "E, MMM d yyyy, " + hourformat);
-    const titlestring = "This time is in your timezone. Original text was '" + text + "'.";
+
+    const tz_offset_str = get_tz_with_UTC_offset(time);
+    const tooltip_html_content = render_markdown_time_tooltip({tz_offset_str});
+
     return {
         text: timestring,
-        title: titlestring,
+        tooltip_content: tooltip_html_content,
     };
 }
 

static/js/tippyjs.js

@@ -185,4 +185,14 @@ export function initialize() {
         placement: "top",
         appendTo: () => document.body,
     });
+
+    delegate("body", {
+        target: ".rendered_markdown time",
+        allowHTML: true,
+        placement: "top",
+        appendTo: () => document.body,
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
 }

static/templates/markdown_time_tooltip.hbs

@@ -0,0 +1,3 @@
+{{t 'Everyone sees this in their own timezone.' }}
+<br/>
+{{t 'Your time zone:' }} {{ tz_offset_str }}