replace tooltips with popovers

cryostatio · Oct 12, 2023 · e07c589 · e07c589
1 parent 490d7a9
commit e07c589
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 51 deletions.
diff --git 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
@@ -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: (