subscription: Use tippy for tooltip.

We no longer need to add_tooltip_to_left_panel_row since
tippyjs.delegate will automatically do that for us.

Tippyjs automatically places it to left on small widths and bottom
for large widhts.

frontend_tests/node_tests/subs.js

@@ -25,9 +25,7 @@ mock_esm("../../static/js/hash_util", {
 const stream_data = zrequire("stream_data");
 const subs = zrequire("subs");
 
-run_test("redraw_left_panel", (override) => {
+run_test("redraw_left_panel", () => {
-    override(subs, "add_tooltip_to_left_panel_row", () => {});
-
     // set-up sub rows stubs
     const denmark = {
         elem: "denmark",

static/js/subs.js

@@ -79,8 +79,6 @@ export function update_left_panel_row(sub) {
         new_row.addClass("active");
     }
 
-    add_tooltip_to_left_panel_row(new_row);
-
     row.replaceWith(new_row);
 }
 
@@ -274,7 +272,6 @@ export function add_sub_to_table(sub) {
     const setting_sub = stream_settings_data.get_sub_for_settings(sub);
     const html = render_subscription(setting_sub);
     const new_row = $(html);
-    add_tooltip_to_left_panel_row(new_row);
 
     if (stream_create.get_name() === sub.name) {
         ui.get_content_element($(".streams-list")).prepend(new_row);
@@ -341,13 +338,6 @@ export function show_active_stream_in_left_panel() {
     }
 }
 
-export function add_tooltip_to_left_panel_row(row) {
-    row.find('.sub-info-box [class$="-bar"] [class$="-count"]').tooltip({
-        placement: "left",
-        animation: false,
-    });
-}
-
 export function update_settings_for_unsubscribed(sub) {
     update_left_panel_row(sub);
     stream_ui_updates.update_subscribers_list(sub);
@@ -496,10 +486,6 @@ export function redraw_left_panel(left_panel_params = get_left_panel_params()) {
     }
     maybe_reset_right_panel();
 
-    for (const row of $("#subscriptions_table .stream-row")) {
-        add_tooltip_to_left_panel_row($(row));
-    }
-
     // return this for test convenience
     return [...buckets.name, ...buckets.desc];
 }

static/templates/subscription.hbs

@@ -12,19 +12,19 @@
     <div class="sub-info-box">
         <div class="top-bar">
             <div class="stream-name">{{name}}</div>
-            <div class="subscriber-count" data-toggle="tooltip" title="{{t 'Subscriber count' }}">
+            <div class="subscriber-count tippy-zulip-tooltip" data-tippy-content="{{t 'Subscriber count' }}">
                 {{> subscription_count}}
             </div>
         </div>
         <div class="bottom-bar">
             <div class="description rendered_markdown" data-no-description="{{t 'No description.'}}">{{rendered_markdown rendered_description}}</div>
             {{#if is_old_stream}}
-            <div class="stream-message-count" data-toggle="tooltip" title="{{t 'Estimated messages per week' }}">
+            <div class="stream-message-count tippy-zulip-tooltip" data-tippy-content="{{t 'Estimated messages per week' }}">
                 <i class="fa fa-bar-chart"></i>
                 <span class="stream-message-count-text">{{stream_weekly_traffic}}</span>
             </div>
             {{else}}
-            <div class="stream-message-count" data-toggle="tooltip" title="{{t 'Stream created recently' }}">
+            <div class="stream-message-count tippy-zulip-tooltip" data-tippy-content="{{t 'Stream created recently' }}">
                 <span class="stream-message-count-text">{{t "New" }}</span>
             </div>
             {{/if}}