diff --git a/web/e2e-tests/compose.test.ts b/web/e2e-tests/compose.test.ts
index 613585eb84..c46c638a6d 100644
--- a/web/e2e-tests/compose.test.ts
+++ b/web/e2e-tests/compose.test.ts
@@ -113,7 +113,7 @@ async function test_open_close_compose_box(page: Page): Promise<void> {
 
 async function test_narrow_to_private_messages_with_cordelia(page: Page): Promise<void> {
     const you_and_cordelia_selector =
-        '*[title="Narrow to your direct messages with Cordelia, Lear\'s daughter"]';
+        '*[data-tippy-content="Narrow to your direct messages with Cordelia, Lear\'s daughter"]';
     // For some unknown reason page.click() isn't working here.
     await page.evaluate(
         (selector: string) => document.querySelector<HTMLElement>(selector)!.click(),
diff --git a/web/templates/recipient_row.hbs b/web/templates/recipient_row.hbs
index 723e8b5d2b..85b9e6441b 100644
--- a/web/templates/recipient_row.hbs
+++ b/web/templates/recipient_row.hbs
@@ -2,9 +2,9 @@
 <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"
+        <a class="message_label_clickable narrows_by_recipient stream_label tippy-zulip-delayed-tooltip"
           href="{{stream_url}}"
-          title="{{t 'Narrow to stream "{display_recipient}"' }}">
+          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}}">
                 {{> stream_privacy}}
             </span>
@@ -20,9 +20,9 @@
         {{! topic stuff }}
         <span class="stream_topic">
             {{! topic link }}
-            <a class="message_label_clickable narrows_by_topic"
+            <a class="message_label_clickable narrows_by_topic tippy-zulip-delayed-tooltip"
               href="{{topic_url}}"
-              title="{{t 'Narrow to stream "{display_recipient}", topic "{topic}"' }}">
+              data-tippy-content="{{t 'Narrow to stream "{display_recipient}", topic "{topic}"' }}">
                 {{#if use_match_properties}}
                     {{{match_topic}}}
                 {{else}}
@@ -80,9 +80,9 @@
 {{else}}
 <div class="message_header message_header_private_message">
     <div class="message-header-contents">
-        <a class="message_label_clickable narrows_by_recipient stream_label"
+        <a class="message_label_clickable narrows_by_recipient stream_label tippy-zulip-delayed-tooltip"
           href="{{pm_with_url}}"
-          title="{{t 'Narrow to your direct messages with {display_reply_to}' }}">
+          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>
         {{t "You and {display_reply_to}" }}
         </a>