tooltips: Add S hotkey hint to narrow-to tippy tooltips.

Added hotkey hint to Narrow to stream/topic/DM tooltips by creating
new tippy for `tippy-narrow-tooltip` with LONG_HOVER_DELAY which
appends `S` hotkey to the existing tippy content set by
data-tippy-content attribute on the element.

Using this approach instead of a <template> with
data-tooltip-template-id avoids issues with context, where
{display_recipient}/{topic}/{display_reply_to} inside <template>
would always show the same stream/topic name regardless of the
actual stream/topic being hovered over.

web/src/tippyjs.js

@@ -185,6 +185,16 @@ export function initialize() {
         },
     });
 
+    delegate("body", {
+        target: ".tippy-narrow-tooltip",
+        delay: LONG_HOVER_DELAY,
+        appendTo: () => document.body,
+        onCreate(instance) {
+            const content = instance.props.content + $("#narrow-hotkey-tooltip-template").html();
+            instance.setContent(parse_html(content));
+        },
+    });
+
     delegate("body", {
         target: ".toggle-subscription-tooltip",
         delay: EXTRA_LONG_HOVER_DELAY,

web/templates/recipient_row.hbs

@@ -2,7 +2,7 @@
 <div class="message_header message_header_stream right_part" data-stream-id="{{stream_id}}">
     <div class="message-header-contents" style="background: {{recipient_bar_color}};">
         {{! stream link }}
-        <a class="message_label_clickable narrows_by_recipient stream_label tippy-zulip-delayed-tooltip"
+        <a class="message_label_clickable narrows_by_recipient stream_label tippy-narrow-tooltip"
           href="{{stream_url}}"
           data-tippy-content="{{t 'Narrow to stream "{display_recipient}"' }}">
             <span class="stream-privacy-modified-color-{{stream_id}} stream-privacy filter-icon"  style="color: {{stream_privacy_icon_color}}">
@@ -20,7 +20,7 @@
         {{! topic stuff }}
         <span class="stream_topic">
             {{! topic link }}
-            <a class="message_label_clickable narrows_by_topic tippy-zulip-delayed-tooltip"
+            <a class="message_label_clickable narrows_by_topic tippy-narrow-tooltip"
               href="{{topic_url}}"
               data-tippy-content="{{t 'Narrow to stream "{display_recipient}", topic "{topic}"' }}">
                 {{#if use_match_properties}}
@@ -80,7 +80,7 @@
 {{else}}
 <div class="message_header message_header_private_message">
     <div class="message-header-contents">
-        <a class="message_label_clickable narrows_by_recipient stream_label tippy-zulip-delayed-tooltip"
+        <a class="message_label_clickable narrows_by_recipient stream_label tippy-narrow-tooltip"
           href="{{pm_with_url}}"
           data-tippy-content="{{t 'Narrow to your direct messages with {display_reply_to}' }}">
         <span class="private_message_header_icon"><i class="zulip-icon zulip-icon-user"></i></span>

web/templates/tooltip_templates.hbs

@@ -2,3 +2,6 @@
     {{t 'View user card' }}
     {{tooltip_hotkey_hints "U"}}
 </template>
+<template id="narrow-hotkey-tooltip-template">
+    {{tooltip_hotkey_hints "S"}}
+</template>