refactor(annotator search): add tooltip for shortcuts on prev and next occurrence

Author: Ptrhnk

packages/client/src/components/advanced/Annotator/AnnotatorSearchLine/AnnotatorSearchLine.tsx

@@ -432,19 +432,31 @@ export const AnnotatorSearchLine: React.FC<AnnotatorSearchLine> = ({
                       {searchActiveOccurence + 1} of {searchOccurences.length}
                     </div>
                     <div style={{ display: "flex", gap: "0.5rem" }}>
-                      <FaRegArrowAltCircleUp
-                        size={15}
-                        color={theme.color.info}
-                        style={{ cursor: "pointer" }}
-                        title="previous occurence"
-                        onClick={goToPreviousOccurence}
+                      <IconWithTooltip
+                        icon={
+                          <FaRegArrowAltCircleUp
+                            size={15}
+                            color={theme.color.info}
+                            style={{ cursor: "pointer" }}
+                            onClick={goToPreviousOccurence}
+                          />
+                        }
+                        tooltipLabel="previous occurence"
+                        tooltipText="(Shift + F3)"
+                        tooltipPosition="top"
                       />
-                      <FaRegArrowAltCircleDown
-                        size={15}
-                        color={theme.color.info}
-                        style={{ cursor: "pointer" }}
-                        title="next occurence"
-                        onClick={goToNextOccurence}
+                      <IconWithTooltip
+                        icon={
+                          <FaRegArrowAltCircleDown
+                            size={15}
+                            color={theme.color.info}
+                            style={{ cursor: "pointer" }}
+                            onClick={goToNextOccurence}
+                          />
+                        }
+                        tooltipLabel="next occurence"
+                        tooltipText="(F3)"
+                        tooltipPosition="top"
                       />
                     </div>
                   </>

packages/client/src/components/basic/IconWithTooltip/IconWithTooltip.tsx

@@ -14,13 +14,15 @@ interface IconWithTooltip {
   tooltipPosition?: AutoPlacement | BasePlacement | VariationPlacement;
   color?: keyof ThemeColor;
   fullWidth?: boolean;
+  tooltipText?: string;
 }
 export const IconWithTooltip: React.FC<IconWithTooltip> = ({
   icon,
   tooltipLabel,
   tooltipPosition = "bottom",
   color = "black",
   fullWidth = false,
+  tooltipText,
 }) => {
   const [referenceElement, setReferenceElement] =
     useState<HTMLDivElement | null>(null);
@@ -49,6 +51,7 @@ export const IconWithTooltip: React.FC<IconWithTooltip> = ({
           visible={showTooltip}
           referenceElement={referenceElement}
           position={tooltipPosition}
+          content={<p>{tooltipText}</p>}
         />
       )}
     </>