feat(web): Add helper tooltips for inputs and link them to docs (#663)

* Fixed button border in settings/download-clients

Button border for "Add new" is now uniform with other "Add new"-buttons

* enhancement(docs) add helper tooltips

-  Add helper tooltips for inputs and link them to docs #161

* fix build error

* tooltips: changed positition

* hide tooltip below 640 width

* made tooltips better

now attaching to TextField names

* Added icon variation for MultiSelect and CheckboxField

* cleaned up old code

* refactor

Co-authored-by: ze0s <zze0s@users.noreply.github.com>

* added tooltips for DownloadClientForms

* added tooltips for indexerforms

* div for passwordfieldwide

* tooltips for details.tsx

* added tooltips to actions.tsx

* added tooltips to indexerforms.tsx

* replaced info icon with a more rudimentary one

* linting, removed duplicate tailwind display properties

* remove margin for flex centering

* fixed tooltip alignment on all fields

* add tooltip to PwFieldWide in indexer edit window

* refactor: simplify tooltips

* refactor: scope tooltip css

* refactor: tooltip default clickable

---------

Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>

web/src/components/inputs/common.tsx

@@ -1,5 +1,6 @@
 import { Field, FieldProps } from "formik";
 import { classNames } from "../../utils";
+import { CustomTooltip } from "../tooltips/CustomTooltip";
 
 interface ErrorFieldProps {
     name: string;
@@ -16,17 +17,29 @@ const ErrorField = ({ name, classNames }: ErrorFieldProps) => (
   </div>
 );
 
+interface RequiredFieldProps {
+  required?: boolean
+}
+
+const RequiredField = ({ required }: RequiredFieldProps) => (
+  <>
+    {required && <span className="ml-1 text-red-500">*</span>}
+  </>
+);
+
 interface CheckboxFieldProps {
     name: string;
     label: string;
     sublabel?: string;
     disabled?: boolean;
+    tooltip?: JSX.Element;
 }
 
 const CheckboxField = ({
   name,
   label,
   sublabel,
+  tooltip,
   disabled
 }: CheckboxFieldProps) => (
   <div className="relative flex items-start">
@@ -43,12 +56,17 @@ const CheckboxField = ({
       />
     </div>
     <div className="ml-3 text-sm">
-      <label htmlFor={name} className="font-medium text-gray-900 dark:text-gray-100">
-        {label}
+      <label htmlFor={name} className="flex mb-2 text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
+        <div className="flex">
+          {label}
+          {tooltip && (
+            <CustomTooltip anchorId={name}>{tooltip}</CustomTooltip>
+          )}
+        </div>
       </label>
       <p className="text-gray-500">{sublabel}</p>
     </div>
   </div>
 );
 
-export { ErrorField, CheckboxField };
+export { ErrorField, RequiredField, CheckboxField };