Refactor TooltipWrapper component to improve structure and enhance tooltip trigger functionality; update localization for missing data descriptions.

Author: devhelpr

src/components/TooltipWrapper.tsx

@@ -1,4 +1,3 @@
-import { InfoIcon } from 'lucide-react';
 import {
     Tooltip,
     TooltipContent,
@@ -9,30 +8,26 @@ import { MarkdownWithTooltips } from './MarkdownWithTooltips';
 
 interface TooltipWrapperProps {
     tooltipContent: string;
+    children: React.ReactNode;
     textBefore?: string;
     textAfter?: string;
-    children: React.ReactNode;
 }
 
 export function TooltipWrapper({
     tooltipContent,
+    children,
     textBefore,
     textAfter,
-    children,
 }: TooltipWrapperProps) {
     return (
-        <div>
+        <span>
             {textBefore}
-            {children}
-
             <TooltipProvider>
                 <Tooltip>
-                    <TooltipTrigger
-                        onClick={event => {
-                            event.preventDefault();
-                        }}
-                    >
-                        <InfoIcon className="size-3.5 ml-1" />
+                    <TooltipTrigger asChild>
+                        <span className="border-b border-dotted border-gray-400 cursor-help">
+                            {children}
+                        </span>
                     </TooltipTrigger>
                     <TooltipContent className="tooltip-content max-w-[400px] p-2">
                         <MarkdownWithTooltips className="text-gray-800 markdown">
@@ -42,6 +37,6 @@ export function TooltipWrapper({
                 </Tooltip>
             </TooltipProvider>
             {textAfter}
-        </div>
+        </span>
     );
 }

src/locales/en.ts

@@ -159,7 +159,7 @@ export const en = {
             'The figures below display the differences in value frequency for a combination of variables. For comparing two categorical variables, bar charts are plotted. For comparing a numerical and a categorical variables, a so called [violin plot](https://en.wikipedia.org/wiki/Violin_plot) is shown. For comparing two numercial variables, a [LOESS plot](https://en.wikipedia.org/wiki/Local_regression) is created. For all plots holds: the synthetic data is of high quality when the shape of the distributions in the synthetic data equal the distributions in the real data.',
         moreInfo:
             'Do you want to learn more about synthetic data?\n  \n  \n  \n- [python-synthpop on Github](https://github.com/NGO-Algorithm-Audit/python-synthpop)\n- [local-first web app on Github](https://github.com/NGO-Algorithm-Audit/local-first-web-tool/tree/main)\n- [Synthetic Data: what, why and how?](https://royalsociety.org/-/media/policy/projects/privacy-enhancing-technologies/Synthetic_Data_Survey-24.pdf)\n- [Knowledge Network Synthetic Data](https://online.rijksinnovatiecommunity.nl/groups/399-kennisnetwerk-synthetischedata/welcome) (for Dutch public organizations)\n- [Synthetic data portal of Dutch Executive Agency for Education](https://duo.nl/open_onderwijsdata/footer/synthetische-data.jsp) (DUO)\n- [CART: synthpop resources](https://synthpop.org.uk/resources.html)\n- [Gaussian Copula - Synthetic Data Vault](https://docs.sdv.dev/sdv)',
-        missingData: `For Missing At Random (MAR) and Missing Not At Random (MNAR) data, 
+        missingData: `For {tooltip:syntheticData.missingDataTooltip}Missing At Random (MAR){/tooltip} and {tooltip:syntheticData.missingDataTooltip}Missing Not At Random (MNAR){/tooltip} data, 
 we recommend to impute the missing data. For Missing Completely At Random (MCAR), we recommend to remove the missing data. {tooltip:syntheticData.missingDataTooltip}See the info box for more information{/tooltip}.`,
         missingDataTooltip: `MCAR, MAR, and MNAR are terms used to describe different mechanisms of missing data: