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,24 +33,34 @@ 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}>
-      <input
-        id={id}
-        type={inputType}
-        onChange={onChange}
-        style={{ verticalAlign: 'bottom' }}
-        name={name}
-        className="custom-control-input"
-        checked={checked}
-      />
-      <label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{ paddingTop: '0.15rem' }}>
-        {name ? <div className="font-weight-bold">{itemName}</div> : ''}
-        {label}
-      </label>
-    </div>
+    <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}
+          onChange={onChange}
+          style={{ verticalAlign: 'bottom' }}
+          name={name}
+          className="custom-control-input"
+          checked={checked}
+        />
+        <label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{ paddingTop: '0.15rem' }}>
+          {name ? <div className="font-weight-bold">{itemName}</div> : ''}
+          {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"