diff --git a/e2e/test/scenarios/collections/collections.cy.spec.js b/e2e/test/scenarios/collections/collections.cy.spec.js
index f868a17f184e8c3a6540e09cd98d7fedb5da1b00..08e983574a17b66a4a36c3780143ebd88b31eda8 100644
--- a/e2e/test/scenarios/collections/collections.cy.spec.js
+++ b/e2e/test/scenarios/collections/collections.cy.spec.js
@@ -150,7 +150,9 @@ describe("scenarios > collection defaults", () => {
       // 2. Ensure we show the helpful tooltip with the full (long) collection name
       // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
       cy.findByText("Fifth collection with a very long name").realHover();
-      popover().contains("Fifth collection with a very long name");
+      cy.findByRole("tooltip", {
+        name: /Fifth collection with a very long name/,
+      });
     });
 
     it("should be usable on mobile screen sizes (metabase#15006)", () => {
diff --git a/frontend/src/metabase/nav/components/AppBar/AppBarToggle.tsx b/frontend/src/metabase/nav/components/AppBar/AppBarToggle.tsx
index 16021db119621da67086d18fd1929d42aa14f3c7..35eadb8fca3b0be984d3908fb7e373bfafc28918 100644
--- a/frontend/src/metabase/nav/components/AppBar/AppBarToggle.tsx
+++ b/frontend/src/metabase/nav/components/AppBar/AppBarToggle.tsx
@@ -1,4 +1,6 @@
 import { t } from "ttag";
+import { useState, useEffect } from "react";
+import { useHover } from "@mantine/hooks";
 import { isMac } from "metabase/lib/browser";
 import { Tooltip } from "metabase/ui";
 import { SidebarButton, SidebarIcon } from "./AppBarToggle.styled";
@@ -18,27 +20,48 @@ export function AppBarToggle({
   isNavBarOpen,
   onToggleClick,
 }: AppBarToggleProps): JSX.Element | null {
+  const [disableTooltip, setDisableTooltip] = useState(false);
+  const { hovered, ref: hoverRef } = useHover();
+
+  // when user clicks the sidebar button, never show the
+  // tooltip as long as their cursor remains on the button
+  // but show it again next time they hover
+  useEffect(() => {
+    if (!hovered) {
+      setDisableTooltip(false);
+    }
+  }, [hovered]);
+
   if (!isNavBarEnabled) {
     return null;
   }
 
+  const handleToggleClick = () => {
+    setDisableTooltip(true);
+    onToggleClick?.();
+  };
+
   return (
-    <Tooltip
-      label={getSidebarTooltipLabel(isNavBarOpen)}
-      disabled={isSmallAppBar}
-      offset={-12}
-    >
-      <SidebarButton
-        isSmallAppBar={isSmallAppBar}
-        isNavBarEnabled={isNavBarEnabled}
-        isLogoVisible={isLogoVisible}
-        onClick={onToggleClick}
-        data-testid="sidebar-toggle"
-        aria-label={t`Toggle sidebar`}
+    <div ref={hoverRef}>
+      <Tooltip
+        label={getSidebarTooltipLabel(isNavBarOpen)}
+        disabled={isSmallAppBar || disableTooltip}
+        withArrow
+        offset={-12}
+        openDelay={1000}
       >
-        <SidebarIcon isLogoVisible={isLogoVisible} size={20} name="burger" />
-      </SidebarButton>
-    </Tooltip>
+        <SidebarButton
+          isSmallAppBar={isSmallAppBar}
+          isNavBarEnabled={isNavBarEnabled}
+          isLogoVisible={isLogoVisible}
+          onClick={handleToggleClick}
+          data-testid="sidebar-toggle"
+          aria-label={t`Toggle sidebar`}
+        >
+          <SidebarIcon isLogoVisible={isLogoVisible} size={20} name="burger" />
+        </SidebarButton>
+      </Tooltip>
+    </div>
   );
 }
 
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx b/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx
index b02a8e127ca7636ba1263d0040c9a6f24d4149f4..9bc71cc596c24e85166b63d374a3800125fa4014 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx
@@ -1,9 +1,8 @@
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 
-import { Icon } from "metabase/ui";
+import { Icon, Tooltip } from "metabase/ui";
 import { TreeNode } from "metabase/components/tree/TreeNode";
-import Tooltip from "metabase/core/components/Tooltip";
 import Link from "metabase/core/components/Link";
 
 import { NAV_SIDEBAR_WIDTH } from "metabase/nav/constants";
@@ -119,7 +118,7 @@ export const ItemName = styled(TreeNode.NameContainer)`
 export function NameContainer({ children: itemName }: { children: string }) {
   if (itemName.length >= ITEM_NAME_LENGTH_TOOLTIP_THRESHOLD) {
     return (
-      <Tooltip tooltip={itemName} maxWidth="none">
+      <Tooltip label={itemName} withArrow maw="none">
         <ItemName>{itemName}</ItemName>
       </Tooltip>
     );