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

@@ -3,6 +3,7 @@ import type { FieldInputProps, FieldMetaProps, FieldProps, FormikProps, FormikVa
 import { Field } from "formik";
 import { Switch as HeadlessSwitch } from "@headlessui/react";
 import { classNames } from "../../utils";
+import { CustomTooltip } from "../tooltips/CustomTooltip";
 
 type SwitchProps<V = unknown> = {
     label?: string
@@ -69,19 +70,26 @@ interface SwitchGroupProps {
     description?: string;
     className?: string;
     heading?: boolean;
+    tooltip?: JSX.Element;
 }
 
 const SwitchGroup = ({
   name,
   label,
   description,
+  tooltip,
   heading
 }: SwitchGroupProps) => (
   <HeadlessSwitch.Group as="ol" className="py-4 flex items-center justify-between">
     {label && <div className="flex flex-col">
-      <HeadlessSwitch.Label as={heading ? "h2" : "p"} className={classNames("font-medium text-gray-900 dark:text-gray-100", heading ? "text-lg" : "text-sm")}
+      <HeadlessSwitch.Label as={heading ? "h2" : "p"} className={classNames("flex float-left cursor-default mb-2 text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide", heading ? "text-lg" : "text-sm")}
         passive>
-        {label}
+        <div className="flex">
+          {label}
+          {tooltip && (
+            <CustomTooltip anchorId={name}>{tooltip}</CustomTooltip>
+          )}
+        </div>
       </HeadlessSwitch.Label>
       {description && (
         <HeadlessSwitch.Description className="text-sm mt-1 text-gray-500 dark:text-gray-400">