From bff9d7818c4a73f7fdafe508f1362e96378b8f61 Mon Sep 17 00:00:00 2001
From: Jelle van der Waa <jvanderwaa@redhat.com>
Date: Thu, 11 Jul 2024 16:35:29 +0200
Subject: [PATCH 1/2] Add tooltips for bookmark and edit path buttons

Explain the bookmark and edit path button with a tooltip.

Related: #581
---
 src/files-breadcrumbs.tsx | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/files-breadcrumbs.tsx b/src/files-breadcrumbs.tsx
index f2d7b8db..663fd80f 100644
--- a/src/files-breadcrumbs.tsx
+++ b/src/files-breadcrumbs.tsx
@@ -26,6 +26,7 @@ import { Icon } from "@patternfly/react-core/dist/esm/components/Icon";
 import { MenuToggle, MenuToggleElement } from "@patternfly/react-core/dist/esm/components/MenuToggle";
 import { PageBreadcrumb } from "@patternfly/react-core/dist/esm/components/Page";
 import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput";
+import { Tooltip, TooltipPosition } from "@patternfly/react-core/dist/esm/components/Tooltip";
 import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex";
 import { CheckIcon, HddIcon, PencilAltIcon, StarIcon, TimesIcon } from "@patternfly/react-icons";
 import { useInit } from "hooks.js";
@@ -167,14 +168,16 @@ function BookmarkButton({ path }: { path: string[] }) {
           onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
           onSelect={handleSelect}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle
-                id="bookmark-btn"
-                variant="secondary"
-                icon={<StarIcon />}
-                ref={toggleRef}
-                onClick={() => setIsOpen(!isOpen)}
-                isExpanded={isOpen}
-              />
+              <Tooltip content={_("Bookmarks")} position={TooltipPosition.bottom}>
+                  <MenuToggle
+                    id="bookmark-btn"
+                    variant="secondary"
+                    icon={<StarIcon />}
+                    ref={toggleRef}
+                    onClick={() => setIsOpen(!isOpen)}
+                    isExpanded={isOpen}
+                  />
+              </Tooltip>
           )}
         >
             <DropdownList>
@@ -258,12 +261,14 @@ export function FilesBreadcrumbs({ path, showHidden, setShowHidden }: { path: st
             <Flex spaceItems={{ default: "spaceItemsSm" }}>
                 <BookmarkButton path={path} />
                 {!editMode &&
-                    <Button
-                      variant="secondary"
-                      icon={<PencilAltIcon />}
-                      onClick={() => enableEditMode()}
-                      className="breadcrumb-button-edit"
-                    />}
+                    <Tooltip content={_("Edit path")} position={TooltipPosition.bottom}>
+                        <Button
+                          variant="secondary"
+                          icon={<PencilAltIcon />}
+                          onClick={() => enableEditMode()}
+                          className="breadcrumb-button-edit"
+                        />
+                    </Tooltip>}
                 {!editMode && fullPath.map((dir, i) => {
                     return (
                         <React.Fragment key={fullPath.slice(0, i).join("/") || "/"}>

From 9306b351d3803642e2aa23f814655c32d752d924 Mon Sep 17 00:00:00 2001
From: Garrett LeSage <garrett@redhat.com>
Date: Tue, 16 Jul 2024 10:43:26 +0200
Subject: [PATCH 2/2] toolbar: Hide the tooltip when the menu is open

---
 src/app.scss              | 5 +++++
 src/files-breadcrumbs.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app.scss b/src/app.scss
index 0b15cdf7..a5539a07 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -186,3 +186,8 @@
 .pf-v5-c-menu-toggle > .pf-v5-c-menu-toggle__controls {
     padding-inline-start: 0;
 }
+
+.tooltip-hidden {
+    visibility: hidden;
+    pointer-events: none;
+}
diff --git a/src/files-breadcrumbs.tsx b/src/files-breadcrumbs.tsx
index 663fd80f..e9173213 100644
--- a/src/files-breadcrumbs.tsx
+++ b/src/files-breadcrumbs.tsx
@@ -168,7 +168,11 @@ function BookmarkButton({ path }: { path: string[] }) {
           onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
           onSelect={handleSelect}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <Tooltip content={_("Bookmarks")} position={TooltipPosition.bottom}>
+              <Tooltip
+                content={_("Bookmarks")}
+                position={TooltipPosition.bottom}
+                className={isOpen ? 'tooltip-hidden' : ''}
+              >
                   <MenuToggle
                     id="bookmark-btn"
                     variant="secondary"