From 2d4d8bf234f2c08c54ccd66bed6055916b3d16f9 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Mon, 14 Oct 2024 09:02:27 -0400
Subject: [PATCH] Fix to show tooltip on explore card badges

---
 frontend/src/components/OdhCard.scss       | 4 ++++
 frontend/src/components/OdhExploreCard.tsx | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/OdhCard.scss b/frontend/src/components/OdhCard.scss
index 7e000e1fab..9e07b2cb30 100644
--- a/frontend/src/components/OdhCard.scss
+++ b/frontend/src/components/OdhCard.scss
@@ -40,6 +40,10 @@
       visibility: hidden;
     }
 
+    &.odh-m-selectable {
+      z-index: 1;
+      cursor: pointer;
+    }
     &.odh-m-doc {
       border-color: var(--pf-v5-global--BackgroundColor--light-300);
       display: flex;
diff --git a/frontend/src/components/OdhExploreCard.tsx b/frontend/src/components/OdhExploreCard.tsx
index 3555b74cbf..e00964a741 100644
--- a/frontend/src/components/OdhExploreCard.tsx
+++ b/frontend/src/components/OdhExploreCard.tsx
@@ -39,6 +39,7 @@ const OdhExploreCard: React.FC<OdhExploreCardProps> = ({
   const cardClasses = classNames('odh-card', { 'm-disabled': disabled });
   const badgeClasses = classNames('odh-card__partner-badge', {
     'm-hidden': odhApp.spec.support === ODH_PRODUCT_NAME,
+    'odh-m-selectable': !disabled,
   });
 
   return (
@@ -64,7 +65,7 @@ const OdhExploreCard: React.FC<OdhExploreCardProps> = ({
                   <FlexItem className="odh-card__coming-soon">Coming soon</FlexItem>
                 )}
                 {!odhApp.spec.comingSoon && odhApp.spec.category && (
-                  <FlexItem className={badgeClasses}>
+                  <FlexItem className={badgeClasses} onClick={disabled ? undefined : onSelect}>
                     <OdhExploreCardTypeBadge category={odhApp.spec.category} />
                   </FlexItem>
                 )}