tooltip: Fix topic status tooltip not showing on hovering.

Earlier, in recents view and inbox view, hovering over
`topic status button` didnot show `click to change notifications for this
topic` tooltip as it was supposed to.

This commit fixes the behaviour of tooltip not showing by adding a
tooltip for `recent_view` and `inbox-view` elements.

web/src/message_list_tooltips.ts

@@ -2,7 +2,6 @@ import $ from "jquery";
 import assert from "minimalistic-assert";
 import * as tippy from "tippy.js";
 
-import render_change_visibility_policy_button_tooltip from "../templates/change_visibility_policy_button_tooltip.hbs";
 import render_message_edit_notice_tooltip from "../templates/message_edit_notice_tooltip.hbs";
 import render_message_inline_image_tooltip from "../templates/message_inline_image_tooltip.hbs";
 import render_narrow_tooltip from "../templates/narrow_tooltip.hbs";
@@ -13,7 +12,11 @@ import * as reactions from "./reactions";
 import * as rows from "./rows";
 import {realm} from "./state_data";
 import * as timerender from "./timerender";
-import {INTERACTIVE_HOVER_DELAY, LONG_HOVER_DELAY} from "./tippyjs";
+import {
+    INTERACTIVE_HOVER_DELAY,
+    LONG_HOVER_DELAY,
+    topic_visibility_policy_tooltip_props,
+} from "./tippyjs";
 import {parse_html} from "./ui_util";
 
 type Config = {
@@ -262,20 +265,8 @@ export function initialize(): void {
 
     message_list_tooltip(".code_external_link");
 
-    message_list_tooltip(".change_visibility_policy > i", {
+    message_list_tooltip("#message_feed_container .change_visibility_policy > i", {
-        delay: LONG_HOVER_DELAY,
+        ...topic_visibility_policy_tooltip_props,
-        onShow(instance) {
-            const $elem = $(instance.reference);
-            const current_visibility_policy_str = $elem.attr("data-tippy-content");
-            instance.setContent(
-                parse_html(
-                    render_change_visibility_policy_button_tooltip({current_visibility_policy_str}),
-                ),
-            );
-        },
-        onHidden(instance) {
-            instance.destroy();
-        },
     });
 
     message_list_tooltip("#message_feed_container .recipient_bar_icon", {

web/src/tippyjs.ts

@@ -3,6 +3,7 @@ import assert from "minimalistic-assert";
 import * as tippy from "tippy.js";
 
 import render_buddy_list_title_tooltip from "../templates/buddy_list/title_tooltip.hbs";
+import render_change_visibility_policy_button_tooltip from "../templates/change_visibility_policy_button_tooltip.hbs";
 import render_org_logo_tooltip from "../templates/org_logo_tooltip.hbs";
 import render_tooltip_templates from "../templates/tooltip_templates.hbs";
 
@@ -77,6 +78,23 @@ tippy.default.setDefaultProps({
     content: get_tooltip_content,
 });
 
+export const topic_visibility_policy_tooltip_props = {
+    delay: LONG_HOVER_DELAY,
+    appendTo: () => document.body,
+    onShow(instance: tippy.Instance) {
+        const $elem = $(instance.reference);
+        const current_visibility_policy_str = $elem.attr("data-tippy-content");
+        instance.setContent(
+            ui_util.parse_html(
+                render_change_visibility_policy_button_tooltip({current_visibility_policy_str}),
+            ),
+        );
+    },
+    onHidden(instance: tippy.Instance) {
+        instance.destroy();
+    },
+};
+
 export function initialize(): void {
     $("#tooltip-templates-container").html(render_tooltip_templates());
 
@@ -659,6 +677,11 @@ export function initialize(): void {
         },
     });
 
+    tippy.delegate("body", {
+        target: ["#recent_view .recipient_bar_icon", "#inbox-view .recipient_bar_icon"].join(","),
+        ...topic_visibility_policy_tooltip_props,
+    });
+
     tippy.delegate("body", {
         target: ".custom-user-field-label-wrapper.required-field-wrapper",
         content: $t({