add custom tooltip to any checboxes

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/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"