Add tooltip to 35mm equivalent

src/components/Tooltip.tsx

@@ -1,18 +1,10 @@
-import { ReactNode } from 'react';
+import { ComponentProps } from 'react';
 import TooltipPrimitive from './primitives/TooltipPrimitive';
 
-export default function Tooltip({
-  children,
-  content,
-  className,
-}: {
-  children: ReactNode
-  content?: ReactNode
-  className?: string
-}) {
+export default function Tooltip(
+  props: ComponentProps<typeof TooltipPrimitive>,
+) {
   return (
-    <TooltipPrimitive {...{ content, className }} >
-      {children}
-    </TooltipPrimitive>
+    <TooltipPrimitive {...props} />
   );
 }

src/components/primitives/TooltipPrimitive.tsx

@@ -9,12 +9,14 @@ import useClickInsideOutside from '@/utility/useClickInsideOutside';
 
 export default function TooltipPrimitive({
   content,
-  children,
   className,
+  sideOffset = 10,
+  children,
 }: {
   content?: ReactNode
-  children: ReactNode
   className?: string
+  sideOffset?: number
+  children: ReactNode
 }) {
   const refTrigger = useRef<HTMLButtonElement>(null);
   const refContent = useRef<HTMLDivElement>(null);
@@ -46,7 +48,7 @@ export default function TooltipPrimitive({
         <Tooltip.Portal >
           <Tooltip.Content
             ref={refContent}
-            sideOffset={10}
+            sideOffset={sideOffset}
             className={clsx(
               // Entrance animations
               'data-[side=top]:animate-fade-in-from-bottom',

src/photo/PhotoLarge.tsx

@@ -39,6 +39,7 @@ import { useAppState } from '@/state/AppState';
 import useImageZoomControls from '@/components/image/useImageZoomControls';
 import { LuExpand } from 'react-icons/lu';
 import LoaderButton from '@/components/primitives/LoaderButton';
+import Tooltip from '@/components/Tooltip';
 
 export default function PhotoLarge({
   photo,
@@ -253,15 +254,18 @@ export default function PhotoLarge({
                       >
                         {photo.focalLengthFormatted}
                       </Link>}
-                    {photo.focalLengthIn35MmFormatFormatted &&
+                    {(
+                      photo.focalLengthIn35MmFormatFormatted &&
+                      // eslint-disable-next-line max-len
+                      photo.focalLengthIn35MmFormatFormatted !== photo.focalLengthFormatted
+                    ) &&
                       <>
                         {' '}
-                        <span
-                          title="35mm equivalent"
-                          className="text-extra-dim"
-                        >
-                          {photo.focalLengthIn35MmFormatFormatted}
-                        </span>
+                        <Tooltip content="35mm equivalent" sideOffset={3}>
+                          <span className="text-extra-dim">
+                            {photo.focalLengthIn35MmFormatFormatted}
+                          </span>
+                        </Tooltip>
                       </>}
                   </li>
                   <li>{photo.fNumberFormatted}</li>