Merge pull request #121 from unicef/fix/tooltip-html-link

Field tooltip title with link fixed
unicef · Aug 8, 2022 · def859e · def859e
2 parents 92d9360 + 12147eb
commit def859e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unicef/material-ui",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "UNICEF theme and components of material-ui for react",
   "main": "index.js",
   "files": [

diff --git a/src/components/Shared/InputLabelHelp.js b/src/components/Shared/InputLabelHelp.js
@@ -22,6 +22,11 @@ const useStyles = makeStyles(theme => ({
   linkHelpLabel: {
     paddingLeft: theme.spacing(0.5),
   },
+  tooltipPopper: {
+    '& a': {
+      color: theme.palette.common.white,
+    },
+  },
 }))
 
 export default function InputLabelHelp({
@@ -38,7 +43,12 @@ export default function InputLabelHelp({
     <Fragment>
       <span>{inputLabel}</span>
       {type === 'tooltip' ? (
-        <Tooltip title={tooltipTitle} placement={tooltipPlacement}>
+        <Tooltip
+          interactive
+          title={<div dangerouslySetInnerHTML={{ __html: tooltipTitle }} />}
+          placement={tooltipPlacement}
+          classes={{ popper: classes.tooltipPopper }}
+        >
           <span className={classes.root}>
             {icon ? icon : <HelpIcon />}
             {label ? (