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/input.tsx

@@ -2,6 +2,7 @@ import { Field, FieldProps } from "formik";
 import { classNames } from "../../utils";
 import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
 import { useToggle } from "../../hooks/hooks";
+import { CustomTooltip } from "../tooltips/CustomTooltip";
 
 type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
@@ -14,6 +15,7 @@ interface TextFieldProps {
     autoComplete?: string;
     hidden?: boolean;
     disabled?: boolean;
+    tooltip?: JSX.Element;
 }
 
 export const TextField = ({
@@ -24,6 +26,7 @@ export const TextField = ({
   columns,
   autoComplete,
   hidden,
+  tooltip,
   disabled
 }: TextFieldProps) => (
   <div
@@ -33,8 +36,13 @@ export const TextField = ({
     )}
   >
     {label && (
-      <label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
-        {label}
+      <label htmlFor={name} className="flex float-left 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>
     )}
     <Field name={name}>
@@ -45,7 +53,7 @@ export const TextField = ({
         <div>
           <input
             {...field}
-            id={name}
+            name={name}
             type="text"
             defaultValue={defaultValue}
             autoComplete={autoComplete}
@@ -207,6 +215,7 @@ interface NumberFieldProps {
     required?: boolean;
     min?: number;
     max?: number;
+    tooltip?: JSX.Element;
 }
 
 export const NumberField = ({
@@ -216,12 +225,18 @@ export const NumberField = ({
   step,
   min,
   max,
+  tooltip,
   disabled,
   required
 }: NumberFieldProps) => (
   <div className="col-span-12 sm:col-span-6">
-    <label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
-      {label}
+    <label htmlFor={name} className="flex float-left 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>
 
     <Field name={name} type="number">