Questionmark tooltip

dashboard/package.json

@@ -23,6 +23,7 @@
     "@heroicons/react": "^2.0.16",
     "@monaco-editor/react": "^4.4.6",
     "@next/font": "^13.2.1",
+    "@popperjs/core": "^2.11.8",
     "@tanstack/react-query": "^4.13.5",
     "@tanstack/react-virtual": "^3.0.0-beta.32",
     "@tauri-apps/api": "^1.4.0",
@@ -51,6 +52,7 @@
     "react-draggable": "^4.4.5",
     "react-ga4": "^1.4.1",
     "react-no-ssr": "^1.1.0",
+    "react-popper": "^2.3.0",
     "react-router-dom": "^6.5.0",
     "react-spinners": "^0.13.4",
     "react-toastify": "^9.1.1",

dashboard/src/components/Atoms/Config/InputBox.tsx

@@ -5,6 +5,7 @@ import {
   faEyeSlash,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Tooltip from 'components/Tooltip';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import BeatLoader from 'react-spinners/BeatLoader';
 import {
@@ -43,6 +44,8 @@ export default function InputBox({
   isLoading: isLoadingProp = false,
   id = '',
   showIcons = true,
+  tooltip = false,
+  tooltipText,
   validate: validateProp, //throws error if invalid
   onChange: onChangeProp,
   description,
@@ -64,6 +67,8 @@ export default function InputBox({
   isLoading?: boolean;
   id?: string;
   showIcons?: boolean;
+  tooltip?: boolean;
+  tooltipText?: string;
   onSubmit: (arg: string) => Promise<void>;
   validate?: (arg: string) => Promise<void>;
   onChange?: (arg: string) => Promise<void>;
@@ -230,7 +235,15 @@ export default function InputBox({
       className={`flex flex-row items-center justify-between ${className} group relative gap-4 bg-gray-800 px-4 py-3 text-medium`}
     >
       <div className={`flex min-w-0 grow flex-col`}>
-        <label className="text-medium font-medium text-gray-300">{label}</label>
+        <div className="flex row">
+          <label className="text-medium font-medium text-gray-300">{label}</label>
+          { tooltip && tooltipText && 
+            <Tooltip
+              tooltip={tooltipText}
+              className="ml-2"
+            />
+          }
+        </div>
         {errorText ? (
           <div className="text-small font-medium tracking-medium text-red">
             {errorText || 'Unknown error'}

dashboard/src/components/Tooltip.tsx

@@ -0,0 +1,50 @@
+import type React from "react";
+import { useState } from "react";
+import { usePopper } from "react-popper";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import clsx from 'clsx';
+
+
+const Tooltip = ({
+  className,
+  tooltip,
+} : { 
+  className?: string,
+  tooltip: string,
+}) => {
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "top",
+  });
+
+  return (
+    <div>
+      <div
+          ref={setReferenceElement}
+          onMouseEnter={() => setIsOpen(true)}
+          onMouseLeave={() => setIsOpen(false)}
+          className="relative inline-block w-auto"
+      >
+        <FontAwesomeIcon
+          icon={faInfoCircle}
+          className={clsx(className, "text-gray-400")}
+        />
+      </div>
+
+      <div
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+        className={`relative rounded-md bg-gray-900 text-white shadow-lg max-w-xs p-2 transition-opacity ${isOpen ? "opacity-100" : "opacity-0"}`}
+      >
+        {tooltip}
+      </div>
+    </div>
+  )
+}
+
+export default Tooltip;

dashboard/src/pages/login/CoreConfigNew.tsx

@@ -15,6 +15,7 @@ import { useGlobalSettings } from 'data/GlobalSettings';
 import { LodestoneContext } from 'data/LodestoneContext';
 import { useCoreInfo } from 'data/SystemInfo';
 import { useDocumentTitle } from 'usehooks-ts';
+import TooltipButton from 'components/Tooltip';
 
 type ConfigNewCoreFormValues = {
   coreName: string;

dashboard/src/pages/settings/CoreSettings.tsx

@@ -95,6 +95,8 @@ export const CoreSettings = () => {
           domain: domain,
         });
       }}
+      tooltip={true}
+      tooltipText={"This is your public IP if you are port-forwarded. If not, leave this as is."}
     />
   );