75 coreui tooltip component

packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { debounce } from 'lodash';
 
-import Tooltip from './Tooltip';
+import MesaTooltip from './MesaTooltip';
 import Events from '../Utils/Events';
 import { MESA_SCROLL_EVENT, MESA_REFLOW_EVENT } from '../Ui/MesaContants';
 
@@ -56,7 +56,7 @@ class AnchoredTooltip extends React.Component {
     const extractedProps = { ...props, children };
 
     return (
-      <Tooltip
+      <MesaTooltip
         corner="top-left"
         className="AnchoredTooltip"
         getPosition={this.getPosition}

packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx

@@ -0,0 +1,73 @@
+import React, { CSSProperties } from 'react';
+
+import { Tooltip } from '../../info/Tooltip';
+
+interface Position {
+  top?: CSSProperties['top'];
+  left?: CSSProperties['left'];
+}
+
+interface MesaTooltipProps {
+  hideDelay?: number;
+  showDelay?: number;
+  children: React.ReactElement;
+  className?: string;
+  content: React.ReactNode;
+  corner?: string;
+  position?: Position;
+  style?: CSSProperties;
+  getPosition?: () => Position;
+  renderHtml?: boolean;
+}
+
+const MesaTooltip = ({
+  hideDelay,
+  showDelay,
+  children,
+  className,
+  content,
+  corner,
+  position,
+  style,
+  getPosition,
+  renderHtml,
+}: MesaTooltipProps) => {
+  const getPositionResult = getPosition?.();
+  const currentPosition = position
+    ? {
+        top: position?.top ?? 0,
+        left: position?.left ?? 0,
+      }
+    : getPositionResult
+    ? {
+        top: getPositionResult?.top ?? 0,
+        left: getPositionResult?.left ?? 0,
+      }
+    : { top: 0, left: 0 };
+  const finalStyle = {
+    top: currentPosition.top,
+    left: currentPosition.left,
+    ...style,
+  };
+
+  return (
+    <Tooltip
+      title={
+        renderHtml ? (
+          <div dangerouslySetInnerHTML={{ __html: content as string }} />
+        ) : (
+          content ?? <></>
+        )
+      }
+      leaveDelay={hideDelay}
+      enterDelay={showDelay}
+      // arrow={corner ? corner !== 'no-corner' : false}
+      className={(className ?? '') + (corner ? ` ${corner}` : '')}
+      style={finalStyle}
+    >
+      {children}
+    </Tooltip>
+  );
+};
+
+export default MesaTooltip;

packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import Templates from '../Templates';
 import Icon from '../Components/Icon';
-import Tooltip from '../Components/Tooltip';
+import MesaTooltip from '../Components/MesaTooltip';
 import { makeClassifier } from '../Utils/Utils';
 import Events, { EventsFactory } from '../Utils/Events';
 import { MESA_SCROLL_EVENT, MESA_REFLOW_EVENT } from './MesaContants';
@@ -65,7 +65,7 @@ class HeadingCell extends React.PureComponent {
   updateOffset() {
     const { element } = this;
     if (!element) return;
-    let offset = Tooltip.getOffset(element);
+    const offset = element.getBoundingClientRect();
     this.setState({ offset });
   }
 
@@ -186,14 +186,14 @@ class HeadingCell extends React.PureComponent {
 
     if (!column.helpText && !column.htmlHelp) return null;
     return (
-      <Tooltip
+      <MesaTooltip
         position={position}
         className="Trigger HelpTrigger"
         content={column.htmlHelp ?? column.helpText}
         renderHtml={!!column.htmlHelp}
       >
         <Icon fa="question-circle" />
-      </Tooltip>
+      </MesaTooltip>
     );
   }
 

packages/libs/coreui/src/components/Mesa/index.jsx

@@ -9,7 +9,7 @@ import ActionToolbar from './Ui/ActionToolbar';
 import PaginationMenu from './Ui/PaginationMenu';
 import MesaController from './Ui/MesaController';
 
-import Tooltip from './Components/Tooltip';
+import MesaTooltip from './Components/MesaTooltip';
 import Checkbox from './Components/Checkbox';
 import BodyLayer from './Components/BodyLayer';
 import HelpTrigger from './Components/HelpTrigger';
@@ -31,7 +31,7 @@ export {
   TableToolbar,
   ActionToolbar,
   PaginationMenu,
-  Tooltip,
+  MesaTooltip,
   Checkbox,
   BodyLayer,
   HelpTrigger,

packages/libs/coreui/src/components/inputs/SearchBox/SearchBox.tsx

@@ -4,18 +4,7 @@ import { merge } from 'lodash';
 import { safeHtml } from '../SelectTree/Utils';
 import { Close, Filter } from '../../icons';
 import { Help, Search } from '@material-ui/icons';
-import { Theme, Tooltip, withStyles } from '@material-ui/core';
-
-const StyledTooltip = withStyles((theme: Theme) => ({
-  tooltip: {
-    backgroundColor: '#fffde7',
-    color: 'rgba(0, 0, 0, 0.87)',
-    maxWidth: 320,
-    fontSize: theme.typography.pxToRem(12),
-    border: '1px solid #dadde9',
-    boxShadow: theme.shadows[1],
-  },
-}))(Tooltip);
+import { Tooltip } from '../../info/Tooltip';
 
 type SearchBoxProps = {
   /** Set the autofocus property of the underlying HTMLTextInputElement */
@@ -208,9 +197,9 @@ export default function SearchBox({
       </label>
       {/* use safeHtml for helpText to allow italic */}
       {!helpText ? null : (
-        <StyledTooltip title={safeHtml(helpText)} interactive>
+        <Tooltip title={safeHtml(helpText)} interactive>
           <Help style={styleSpec.helpIcon} />
-        </StyledTooltip>
+        </Tooltip>
       )}
     </div>
   );

packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx

@@ -5,7 +5,7 @@ import { merge } from 'lodash';
 import { useMemo } from 'react';
 import { UITheme } from '../../theming/types';
 import useUITheme from '../../theming/useUITheme';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '../../info/Tooltip';
 
 export type CheckboxListStyleSpec = {
   container: {

packages/libs/coreui/src/index.ts

@@ -1,3 +1,6 @@
+// Information
+export * from './components/info/Tooltip';
+
 // Typography
 export * from './components/typography';
 

packages/libs/eda/src/lib/core/components/FilterChip.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
-import { Chip, Tooltip } from '@material-ui/core';
+import { Chip } from '@material-ui/core';
+import { Tooltip } from '@veupathdb/coreui';
 import { makeStyles } from '@material-ui/core/styles';
 
 interface Props {