title of invention tooltip

ui/src/components/Search/Search.tsx

@@ -35,7 +35,13 @@ const fields: FormFieldProps[] = [
       { value: "Withdrawn", label: "Withdrawn" },
     ],
   },
-  { name: "titleOfInvention", label: "Title Of Invention", type: "text" },
+  {
+    name: "titleOfInvention",
+    label: "Title Of Invention",
+    type: "text",
+    tooltipText:
+      "Enabling the smart search will retrieve results that not only match the title of invention keyword, but are also semantically similar in meaning.",
+  },
   {
     name: "filingDate",
     label: "Filing Date Range",
@@ -194,6 +200,7 @@ export default function SearchComponent() {
       placeholder={field.label}
       // error={errors[field.name]}
       options={field.options}
+      tooltipText={field.tooltipText}
     />
   );
   return (

ui/src/components/elements/FormField.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import tooltipIcon from "../../assets/tooltip-48.png";
 const FormField: React.FC<FormFieldProps> = ({
   label,
   name,
@@ -11,15 +12,27 @@ const FormField: React.FC<FormFieldProps> = ({
   options = [],
   valueEnd,
   onChangeEnd,
+  tooltipText,
 }) => {
   const inputClass = `form-control ${error ? "is-invalid" : ""}`;
 
   return (
     <div className="mb-3 text-start">
       <label htmlFor={name} className="form-label fw-semibold">
-        {label}
+        {label + " "}
+        {tooltipText && (
+          <OverlayTrigger
+            placement="top"
+            overlay={<Tooltip id={`tooltip-${name}`}>{tooltipText}</Tooltip>}
+          >
+            <img
+              src={tooltipIcon}
+              alt="info"
+              style={{ width: "16px", height: "16px", cursor: "pointer" }}
+            />
+          </OverlayTrigger>
+        )}
       </label>
-
       {type === "select" ? (
         <select
           id={name}
@@ -101,4 +114,5 @@ export interface FormFieldProps {
   options?: Option[]; // For select
   valueEnd?: string; // For date-range end value
   onChangeEnd?: (e: React.ChangeEvent<HTMLInputElement>) => void; // For date-range end
+  tooltipText?: string;
 }

ui/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+}