tooltip for data support

hubmapconsortium · Jul 13, 2023 · f7d78a1 · f7d78a1
1 parent 118a9b2
commit f7d78a1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/context/app/static/js/components/detailPage/BulkDataTransfer/GlobusLink.jsx b/context/app/static/js/components/detailPage/BulkDataTransfer/GlobusLink.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { DetailSectionPaper } from 'js/shared-styles/surfaces';
 import { useFlaskDataContext } from 'js/components/Contexts';
 import { useFilesContext } from 'js/components/detailPage/files/Files/context';
+import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips';
 import FilesConditionalLink from './FilesConditionalLink';
 import { StyledExternalLinkIcon, GlobusLinks } from './style';
 import { useFetchProtectedFile } from './hooks';
@@ -22,14 +23,16 @@ function GlobusLink({ uuid, isSupport }) {
   return (
     <DetailSectionPaper>
       {isSupport && 'Support Dataset: '}
-      <FilesConditionalLink
-        href={responseUrl}
-        hasAgreedToDUA={hasAgreedToDUA}
-        openDUA={() => openDUA(responseUrl)}
-        variant="body2"
-      >
-        {isSupport ? '' : hubmap_id} Globus <StyledExternalLinkIcon />
-      </FilesConditionalLink>
+      <SecondaryBackgroundTooltip title="Data generated for visualization of this dataset are also available on Globus.">
+        <FilesConditionalLink
+          href={responseUrl}
+          hasAgreedToDUA={hasAgreedToDUA}
+          openDUA={() => openDUA(responseUrl)}
+          variant="body2"
+        >
+          {isSupport ? '' : hubmap_id} Globus <StyledExternalLinkIcon />
+        </FilesConditionalLink>
+      </SecondaryBackgroundTooltip>
     </DetailSectionPaper>
   );
 }

diff --git a/context/app/static/js/components/detailPage/context.js b/context/app/static/js/components/detailPage/context.js
@@ -5,6 +5,6 @@ const DetailContext = React.createContext({});
 
 DetailContext.displayName = 'DetailContext';
 
-export default DetailContext;
+export { DetailContext };
 
 export const useDetailContext = () => useContext(DetailContext);