left sidebar: Improve tooltip for show_all_private_messages.

Switch to a full keyboard-shortcut advertising tippy tooltip for
show_all_private_messages in left sidebar by adding a class
`.tippy-left-sidebar-tooltip` which adds tooltip with LONG_HOVER_DELAY
and default placement right with fallback placement equal to bottom.

Fixes part of #24311.

web/src/tippyjs.js

@@ -133,6 +133,27 @@ export function initialize() {
         },
     });
 
+    // Variant of .tippy-left-sidebar-tooltip configuration. Since
+    // this element doesn't have an always visible label, and
+    // thus hovering it is a way to find out what it does, give
+    // it the faster LONG_HOVER_DELAY.
+    delegate("body", {
+        target: "#show_all_private_messages",
+        placement: "right",
+        delay: LONG_HOVER_DELAY,
+        appendTo: () => document.body,
+        popperOptions: {
+            modifiers: [
+                {
+                    name: "flip",
+                    options: {
+                        fallbackPlacements: "bottom",
+                    },
+                },
+            ],
+        },
+    });
+
     // The below definitions are for specific tooltips that require
     // custom JavaScript code or configuration.  Note that since the
     // below specify the target directly, elements using those should
@@ -549,15 +570,6 @@ export function initialize() {
         appendTo: () => document.body,
     });
 
-    delegate("body", {
-        target: "#show_all_private_messages",
-        placement: "bottom",
-        content: $t({
-            defaultMessage: "All direct messages (P)",
-        }),
-        appendTo: () => document.body,
-    });
-
     delegate("body", {
         target: ".view_user_card_tooltip",
         content: $t({

web/templates/left_sidebar.hbs

@@ -77,9 +77,13 @@
                     <h4 class="sidebar-title toggle_private_messages_section">{{t 'DIRECT MESSAGES' }}</h4>
                 </span>
                 <span class="unread_count"></span>
-                <a id="show_all_private_messages" href="#narrow/is/private">
+                <a id="show_all_private_messages" href="#narrow/is/private" data-tooltip-template-id="show-all-pms-template">
                     <i class="fa fa-align-right" aria-label="{{t 'All direct messages' }}"></i>
                 </a>
+                <template id="show-all-pms-template">
+                    {{t 'All direct messages' }}
+                    {{tooltip_hotkey_hints "P"}}
+                </template>
             </div>
         </div>
         <a class="zoom-out-hide" id="hide_more_private_messages">