[site/components][f]: tooltip content path adjstmn

site/components/Anchor.js

@@ -3,30 +3,36 @@ import { useRouter } from 'next/router'
 import { Tooltip } from './Tooltip';
 import siteConfig from '../config/siteConfig.js'
 
-
+/**
+ * Component for adding previews on hover for specific anchor tags.
+ * Note: currently tooltips will be displayed only for anchor tags pointing to concepts.
+ */
 export const Anchor = (props) => {
   const { href } = props;
   const router = useRouter();
 
-  const absoluteContentPath = (href) => {
+  /* Check if the url is relative */
-    // return content path only if it points to a local file (href path is relative)
+  const urlIsRelative = (url) => {
-    if (
+    return href &&
-      href &&
       href.indexOf("http:") !== 0 &&
       href.indexOf("https:") !== 0
-    ) {
-      const currentPageContentPath = [siteConfig.rawContentBaseUrl, router.asPath].join("");
-      const hrefContentPath = new URL(href, currentPageContentPath).href;
-      // excluding notes and claims
-      if (!hrefContentPath.includes("notes") && !hrefContentPath.includes("claims")) {
-        return hrefContentPath;
-      }
-    }
   }
 
-  if (absoluteContentPath(props.href)) {
+  /* Return absolute path to raw markdown content
+   * Note: currently disabled for guide page due to non-standard relative paths in some anchors (TBD) */
+  const getRawMdContentUrl = (url, routerPath) => {
+    if (routerPath === '/guide' || !urlIsRelative(url)) {
+      return null
+    }
+    const currentPageMdUrl = [siteConfig.rawContentBaseUrl, routerPath].join("");
+    return new URL(href, currentPageMdUrl).href;
+  }
+
+  const rawMdUrl = getRawMdContentUrl(href, router.asPath);
+
+  if (rawMdUrl && !rawMdUrl.includes("notes") && !rawMdUrl.includes("claims")) {
     return (
-      <Tooltip {...props} absolutePath={absoluteContentPath(props.href)} render={ tooltipTriggerProps => (
+      <Tooltip {...props} absolutePath={rawMdUrl} render={ tooltipTriggerProps => (
         <a {...tooltipTriggerProps} />
       )}
       />

site/components/Tooltip.js

@@ -55,7 +55,7 @@ export const Tooltip = ({ absolutePath, render, ...props }) => {
   const [ showTooltip, setShowTooltip ] = useState(false);
   const [ tooltipContent, setTooltipContent ] = useState("");
   const [ tooltipContentLoaded, setTooltipContentLoaded ] = useState(false);
-  // floating-ui dom hook
+  // floating-ui hook
   const {
     x,
     y,
@@ -76,7 +76,7 @@ export const Tooltip = ({ absolutePath, render, ...props }) => {
       inline(), // correct position for multiline anchor tags
     ]
   });
-  // floating-ui interactions hook
+  // floating-ui hook
   const { getReferenceProps, getFloatingProps } = useInteractions([
     useHover(context, { delay: 100 }),
     useFocus(context),
@@ -84,7 +84,7 @@ export const Tooltip = ({ absolutePath, render, ...props }) => {
     useDismiss(context, { ancestorScroll: true }),
   ]);
 
-  const tooltipTriggerProps = getReferenceProps({ ...props, ref: reference});
+  const triggerElementProps = getReferenceProps({ ...props, ref: reference});
   const tooltipProps = getFloatingProps({
     ref: floating,
     style: {
@@ -124,7 +124,7 @@ export const Tooltip = ({ absolutePath, render, ...props }) => {
 
   return (
     <Fragment>
-    { render(tooltipTriggerProps) }
+    { render(triggerElementProps) }
       <FloatingPortal>
         <AnimatePresence>
           { showTooltip && tooltipContentLoaded &&