From e07c58944416f5da45b20a7fbbad3e9d959db2ab Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 12 Oct 2023 11:05:20 -0400
Subject: [PATCH] replace tooltips with popovers

---
 .../Credentials/StoreCredentials.tsx          | 32 ++++--------------
 src/app/SecurityPanel/ImportCertificate.tsx   | 33 ++++---------------
 2 files changed, 14 insertions(+), 51 deletions(-)

diff --git a/src/app/SecurityPanel/Credentials/StoreCredentials.tsx b/src/app/SecurityPanel/Credentials/StoreCredentials.tsx
index ade583f1b..395b88d7e 100644
--- a/src/app/SecurityPanel/Credentials/StoreCredentials.tsx
+++ b/src/app/SecurityPanel/Credentials/StoreCredentials.tsx
@@ -33,6 +33,7 @@ import {
   EmptyState,
   EmptyStateIcon,
   Icon,
+  Popover,
   Text,
   TextContent,
   TextVariants,
@@ -520,35 +521,16 @@ export const CheckBoxActions: React.FC<CheckBoxActionsProps> = ({
   );
 };
 
-const CredentialsTooltip: React.FC<{}> = () => {
-  const [visible, setVisible] = React.useState(false);
-
-  return (
-    <Tooltip
-      aria="none"
-      aria-live="polite"
-      trigger="manual"
-      isVisible={visible}
-      isContentLeftAligned
-      maxWidth="40rem"
-      content={
-        <JmxAuthDescription>
-          <Text component={TextVariants.h3}>JMX Authentication</Text>
-        </JmxAuthDescription>
-      }
-    >
-      <Button variant="plain" onClick={() => setVisible((v) => !v)}>
-        <OutlinedQuestionCircleIcon />
-      </Button>
-    </Tooltip>
-  );
-};
-
 export const StoreCredentialsCard: SecurityCard = {
   key: 'credentials',
   title: (
     <Text>
-      Store Credentials <CredentialsTooltip />
+      Store Credentials
+      <Popover maxWidth="40rem" headerContent="JMX Authentication" bodyContent={<JmxAuthDescription />}>
+        <Button variant="plain">
+          <OutlinedQuestionCircleIcon />
+        </Button>
+      </Popover>
     </Text>
   ),
   description: (
diff --git a/src/app/SecurityPanel/ImportCertificate.tsx b/src/app/SecurityPanel/ImportCertificate.tsx
index 6c9cbc9f2..9dfa6b996 100644
--- a/src/app/SecurityPanel/ImportCertificate.tsx
+++ b/src/app/SecurityPanel/ImportCertificate.tsx
@@ -15,7 +15,7 @@
  */
 
 import { JmxSslDescription } from '@app/Shared/Components/JmxSslDescription';
-import { Button, Icon, Text, TextContent, TextVariants, Tooltip } from '@patternfly/react-core';
+import { Button, Icon, Popover, Text, TextContent, TextVariants, Tooltip } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { CertificateUploadModal } from './CertificateUploadModal';
@@ -38,35 +38,16 @@ export const CertificateImport: React.FC = () => {
   );
 };
 
-const CertificateTooltip: React.FC<{}> = () => {
-  const [visible, setVisible] = React.useState(false);
-
-  return (
-    <Tooltip
-      aria="none"
-      aria-live="polite"
-      trigger="manual"
-      isVisible={visible}
-      isContentLeftAligned
-      maxWidth="40rem"
-      content={
-        <JmxSslDescription>
-          <Text component={TextVariants.h3}>JMX over SSL</Text>
-        </JmxSslDescription>
-      }
-    >
-      <Button variant="plain" onClick={() => setVisible((v) => !v)}>
-        <OutlinedQuestionCircleIcon />
-      </Button>
-    </Tooltip>
-  );
-};
-
 export const ImportCertificate: SecurityCard = {
   key: 'ssl',
   title: (
     <Text>
-      Import SSL Certificates <CertificateTooltip />
+      Import SSL Certificates
+      <Popover maxWidth="40rem" headerContent="JMX over SSL" bodyContent={<JmxSslDescription />}>
+        <Button variant="plain">
+          <OutlinedQuestionCircleIcon />
+        </Button>
+      </Popover>
     </Text>
   ),
   description: (