Merge pull request #3005 from ethereum/custom-tooltips-ssa

Custom tooltips for Static Analysis

libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx

@@ -1,5 +1,8 @@
 import React, { CSSProperties } from 'react'  //eslint-disable-line
+import { OverlayProps, OverlayTrigger, OverlayTriggerProps, Tooltip } from 'react-bootstrap'// eslint-disable-line
 import './remix-ui-checkbox.css'
+type Placement = import('react-overlays/usePopper').Placement;
+
 
 /* eslint-disable-next-line */
 export interface RemixUiCheckboxProps {
@@ -15,6 +18,7 @@ export interface RemixUiCheckboxProps {
   title?: string
   visibility?: string
   display?: string
+  tooltipPlacement?: Placement
 }
 
 export const RemixUiCheckbox = ({
@@ -29,10 +33,19 @@ export const RemixUiCheckbox = ({
   categoryId,
   title,
   visibility,
-  display = 'flex'
+  display = 'flex',
+  tooltipPlacement = 'right-start'
 }: RemixUiCheckboxProps) => {
   return (
-    <div className="listenOnNetwork_2A0YE0 custom-control custom-checkbox" title={title} style={{ display: display, alignItems: 'center', visibility: visibility } as CSSProperties } onClick={onClick}>
+    <OverlayTrigger
+      placement={tooltipPlacement}
+      overlay={
+        <Tooltip id={`${name}Tooltip`}>
+          <span>{title}</span>
+        </Tooltip>
+      }
+    >
+      <div className="listenOnNetwork_2A0YE0 custom-control custom-checkbox" style={{ display: display, alignItems: 'center', visibility: visibility } as CSSProperties } onClick={onClick}>
         <input
           id={id}
           type={inputType}
@@ -47,6 +60,7 @@ export const RemixUiCheckbox = ({
           {label}
         </label>
       </div>
+    </OverlayTrigger>
   )
 }
 

libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react'  //eslint-disable-line
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 interface StaticAnalyserButtonProps {
   onClick: (event) => void
@@ -16,8 +17,19 @@ const StaticAnalyserButton = ({
   let classList = "btn btn-sm w-25 btn-primary"
   classList += disabled ? " disabled" : ""
   return (
-    <button className={classList} disabled={disabled} title={title} onClick={onClick}>
+    <button className={classList} disabled={disabled} onClick={onClick}>
+      <OverlayTrigger
+        placement="bottom-start"
+        overlay={
+          <Tooltip id="ssaRunButtonTooltip" className="text-nowrap">
+            <span>{title}</span>
+          </Tooltip>
+        }
+      >
+        <span>
           {buttonText}
+        </span>
+      </OverlayTrigger>
     </button>
   )
 }

libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx

@@ -490,6 +490,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
             label="Select all"
             onClick={() => handleCheckAllModules(groupedModules)}
             onChange={() => {}}
+            tooltipPlacement={'top-start'}
           />
           <RemixUiCheckbox
             id="autorunstaticanalysis"
@@ -499,6 +500,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
             checked={autoRun}
             label="Autorun"
             onChange={() => {}}
+            tooltipPlacement={'bottom-start'}
           />
           <Button
             buttonText="Run"