fix: add tooltip message on information icon hover (#421)

Fixes #366
open-sauced · Sep 22, 2022 · 12ff851 · 12ff851
1 parent 20fbc9f
commit 12ff851
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/components/atoms/ToggleOption/toggle-option.tsx b/components/atoms/ToggleOption/toggle-option.tsx
@@ -4,18 +4,23 @@ import { HiInformationCircle } from "react-icons/hi";
 interface ToogleOptionProps {
   optionText: string;
   withIcon?: boolean;
-  checked: boolean
-  handleToggle: ()=> void;
+  checked: boolean;
+  handleToggle: () => void;
 }
-const ToggleOption = ({ optionText, withIcon , checked, handleToggle}: ToogleOptionProps): JSX.Element => {
+const ToggleOption = ({ optionText, withIcon, checked, handleToggle }: ToogleOptionProps): JSX.Element => {
   return (
     <div
       onClick={handleToggle}
       className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-0.5 border border-light-slate-6 bg-light-slate-1"
     >
       <ToggleSwitch handleToggle={handleToggle} name={optionText} checked={checked} />
       <span className="text-light-slate-11">{optionText}</span>
-      {withIcon && <HiInformationCircle className="text-light-slate-9" />}
+      {withIcon && (
+        <HiInformationCircle
+          title="An outside contributor is not a member the organization"
+          className="text-light-slate-9"
+        />
+      )}
     </div>
   );
 };