From bd3420fbdd82cd17f854b6c0f1f50102dd0f0d88 Mon Sep 17 00:00:00 2001
From: Camille Moussu <ca.noiray@gmail.com>
Date: Mon, 20 May 2024 11:34:32 +0400
Subject: [PATCH] [#6] added tooltip for help on parametters + added file to
 complete with defs

---
 .../applicationsComponents/CasApp.tsx         |  53 ++++--
 .../applicationsComponents/NativeApp.tsx      | 115 ++++++++++---
 .../applicationsComponents/OIDCApp.tsx        |  44 +++--
 .../applicationsComponents/OptionOidc.tsx     | 160 +++++++++++++-----
 .../applicationsComponents/OptionSaml.tsx     |  83 ++++++---
 .../applicationsComponents/SAMLApp.tsx        |  32 +++-
 .../authParamOptions/OptionRenderer.tsx       | 100 ++++++++---
 .../managerComponents/MandatoryFields.tsx     |  15 +-
 src/static/definitions.json                   |   3 +
 9 files changed, 467 insertions(+), 138 deletions(-)
 create mode 100644 src/static/definitions.json

diff --git a/src/components/applicationsComponents/CasApp.tsx b/src/components/applicationsComponents/CasApp.tsx
index 6442430..396adee 100644
--- a/src/components/applicationsComponents/CasApp.tsx
+++ b/src/components/applicationsComponents/CasApp.tsx
@@ -20,7 +20,10 @@ import {
   Radio,
   RadioGroup,
   TextField,
+  Tooltip,
 } from "@mui/material";
+import Markdown from "markdown-to-jsx";
+import definitions from "../../static/definitions.json";
 
 export function CasApp({ name }: { name: string }) {
   const vars = useAppSelector((state) =>
@@ -67,8 +70,16 @@ export function CasApp({ name }: { name: string }) {
             <table id="exportedVars">
               <thead>
                 <tr>
-                  <th>{t("keys")}</th>
-                  <th>{t("values")}</th>
+                  <th>
+                    <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                      <th>{t("keys")}</th>
+                    </Tooltip>
+                  </th>
+                  <th>
+                    <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                      <th>{t("values")}</th>
+                    </Tooltip>
+                  </th>
                   <th>
                     <Button
                       className="plus"
@@ -103,8 +114,16 @@ export function CasApp({ name }: { name: string }) {
             <table id="macros">
               <thead>
                 <tr>
-                  <th>{t("keys")}</th>
-                  <th>{t("values")}</th>
+                  <th>
+                    <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                      <th>{t("keys")}</th>
+                    </Tooltip>
+                  </th>
+                  <th>
+                    <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                      <th>{t("values")}</th>
+                    </Tooltip>
+                  </th>
                   <th>
                     <Button
                       className="plus"
@@ -138,7 +157,11 @@ export function CasApp({ name }: { name: string }) {
             <table>
               <tbody>
                 <tr>
-                  <th>{t("casAppMetaDataOptionsDisplayName")}</th>
+                  <th>
+                    <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                      <th>{t("casAppMetaDataOptionsDisplayName")}</th>
+                    </Tooltip>
+                  </th>
                   <td>
                     <TextField
                       size="small"
@@ -164,7 +187,9 @@ export function CasApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("casAppMetaDataOptionsService")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("casAppMetaDataOptionsService")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
@@ -190,7 +215,9 @@ export function CasApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("casAppMetaDataOptionsLogout")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("casAppMetaDataOptionsLogout")}</th>
+                  </Tooltip>
                   <td>
                     <FormControl>
                       <RadioGroup
@@ -228,7 +255,9 @@ export function CasApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("casAppMetaDataOptionsAuthnLevel")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("casAppMetaDataOptionsAuthnLevel")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
@@ -254,7 +283,9 @@ export function CasApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("casAppMetaDataOptionsRule")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("casAppMetaDataOptionsRule")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
@@ -280,7 +311,9 @@ export function CasApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("casAppMetaDataOptionsComment")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("casAppMetaDataOptionsComment")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       variant="filled"
diff --git a/src/components/applicationsComponents/NativeApp.tsx b/src/components/applicationsComponents/NativeApp.tsx
index 089df15..7c79cfc 100644
--- a/src/components/applicationsComponents/NativeApp.tsx
+++ b/src/components/applicationsComponents/NativeApp.tsx
@@ -33,8 +33,11 @@ import {
   RadioGroup,
   Select,
   TextField,
+  Tooltip,
 } from "@mui/material";
 import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
+import Markdown from "markdown-to-jsx";
+import definitions from "../../static/definitions.json";
 function updateRules(tableID: string) {
   const ruleList = [];
 
@@ -201,7 +204,9 @@ function NativeRule(appName: string, locationRules: Record<string, string>) {
         );
       })}
       <tr>
-        <th>{t("defaultRule")}</th>
+        <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+          <th>{t("defaultRule")}</th>
+        </Tooltip>
         <td>
           <TextField
             size="small"
@@ -422,13 +427,31 @@ export function NativeApp({ name }: { name: string }) {
             <table>
               <tbody>
                 <tr>
-                  <th>{t("vhostComment")}</th>
-                  <th>{t("regexp")}</th>
-                  <th>{t("rules")}</th>
-                  <th>{t("rulesAuthnLevel")}</th>
+                  <th>
+                    <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                      <th>{t("vhostComment")}</th>
+                    </Tooltip>
+                  </th>
+                  <th>
+                    <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                      <th>{t("regexp")}</th>
+                    </Tooltip>
+                  </th>
+                  <th>
+                    <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                      <th>{t("rules")}</th>
+                    </Tooltip>
+                  </th>
+                  <th>
+                    <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                      <th>{t("rulesAuthnLevel")}</th>
+                    </Tooltip>
+                  </th>
                 </tr>
                 <tr>
-                  <th>{t("defaultRule")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("defaultRule")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
@@ -476,7 +499,9 @@ export function NativeApp({ name }: { name: string }) {
             <table>
               <tbody>
                 <tr>
-                  <th>{t("maintenance")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("maintenance")}</th>
+                  </Tooltip>
                   <td>
                     <FormControl>
                       <RadioGroup
@@ -519,10 +544,18 @@ export function NativeApp({ name }: { name: string }) {
             <table id="locationRules">
               <thead>
                 <tr>
-                  <th>{t("vhostComment")}</th>
-                  <th>{t("regexp")}</th>
-                  <th>{t("rules")}</th>
-                  <th>{t("rulesAuthnLevel")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("vhostComment")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("regexp")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("rules")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("rulesAuthnLevel")}</th>
+                  </Tooltip>
                   <th>
                     <Button
                       className="plus"
@@ -546,8 +579,12 @@ export function NativeApp({ name }: { name: string }) {
             <table id="exportedHeaders">
               <thead>
                 <tr>
-                  <th>{t("keys")}</th>
-                  <th>{t("values")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("keys")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("values")}</th>
+                  </Tooltip>
                   <th>
                     <Button
                       className="plus"
@@ -582,11 +619,21 @@ export function NativeApp({ name }: { name: string }) {
             <table id="post">
               <thead>
                 <tr>
-                  <th>{t("postUrl")}</th>
-                  <th>{t("postTargetUrl")}</th>
-                  <th>{t("jqueryUrl")}</th>
-                  <th>{t("jqueryFormSelector")}</th>
-                  <th>{t("jqueryButtonSelector")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("postUrl")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("postTargetUrl")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("jqueryUrl")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("jqueryFormSelector")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("jqueryButtonSelector")}</th>
+                  </Tooltip>
                   <th>
                     <Button
                       className="plus"
@@ -614,7 +661,9 @@ export function NativeApp({ name }: { name: string }) {
             <table>
               <tbody>
                 <tr>
-                  <th>{t("port")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("port")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
@@ -640,7 +689,9 @@ export function NativeApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("vhostHttps")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("vhostHttps")}</th>
+                  </Tooltip>
                   <td>
                     <FormControl>
                       <RadioGroup
@@ -680,7 +731,9 @@ export function NativeApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("maintenance")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("maintenance")}</th>
+                  </Tooltip>
                   <td>
                     <FormControl>
                       <RadioGroup
@@ -711,7 +764,9 @@ export function NativeApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("vhostAliases")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("vhostAliases")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
@@ -737,7 +792,9 @@ export function NativeApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("vhostAccessToTrace")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("vhostAccessToTrace")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
@@ -763,7 +820,9 @@ export function NativeApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("vhostType")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("vhostType")}</th>
+                  </Tooltip>
                   <td>
                     <FormControl sx={{ m: 1, minWidth: 120 }}>
                       <InputLabel>{t("vhostType")}</InputLabel>
@@ -796,7 +855,9 @@ export function NativeApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("vhostAuthnLevel")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("vhostAuthnLevel")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
@@ -818,7 +879,9 @@ export function NativeApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("vhostServiceTokenTTL")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("vhostServiceTokenTTL")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
diff --git a/src/components/applicationsComponents/OIDCApp.tsx b/src/components/applicationsComponents/OIDCApp.tsx
index 0022070..5e0d1b4 100644
--- a/src/components/applicationsComponents/OIDCApp.tsx
+++ b/src/components/applicationsComponents/OIDCApp.tsx
@@ -25,7 +25,11 @@ import {
   Select,
   MenuItem,
   TextField,
+  Tooltip,
 } from "@mui/material";
+import Markdown from "markdown-to-jsx";
+import definitions from "../../static/definitions.json";
+
 import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
 function updateExpAttr(
   tableID: string,
@@ -338,7 +342,9 @@ export function OIDCApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("oidcRPMetaDataOptionsRedirectUris")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("oidcRPMetaDataOptionsRedirectUris")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
@@ -365,7 +371,9 @@ export function OIDCApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("oidcRPMetaDataOptionsAuthMethod")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("oidcRPMetaDataOptionsAuthMethod")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
@@ -392,7 +400,9 @@ export function OIDCApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("oidcRPMetaDataOptionsDisplay")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("oidcRPMetaDataOptionsDisplay")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
@@ -421,7 +431,9 @@ export function OIDCApp({ name }: { name: string }) {
                   </td>
                 </tr>
                 <tr>
-                  <th>{t("oidcRPMetaDataOptionsIcon")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("oidcRPMetaDataOptionsIcon")}</th>
+                  </Tooltip>
                   <td>
                     <TextField
                       size="small"
@@ -459,10 +471,18 @@ export function OIDCApp({ name }: { name: string }) {
             <table id="exportedVars">
               <thead>
                 <tr>
-                  <th>{t("claimName")}</th>
-                  <th>{t("variableName")}</th>
-                  <th>{t("type")}</th>
-                  <th>{t("array")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("claimName")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("variableName")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("type")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("array")}</th>
+                  </Tooltip>
                   <th>
                     <Button
                       className="plus"
@@ -498,8 +518,12 @@ export function OIDCApp({ name }: { name: string }) {
             <table id="oidcRPMetaDataMacros">
               <thead>
                 <tr>
-                  <th>{t("keys")}</th>
-                  <th>{t("values")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("keys")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("values")}</th>
+                  </Tooltip>
                   <th>
                     <Button
                       className="plus"
diff --git a/src/components/applicationsComponents/OptionOidc.tsx b/src/components/applicationsComponents/OptionOidc.tsx
index 755831c..ab038ed 100644
--- a/src/components/applicationsComponents/OptionOidc.tsx
+++ b/src/components/applicationsComponents/OptionOidc.tsx
@@ -26,7 +26,11 @@ import {
   Select,
   TextField,
   styled,
+  Tooltip,
 } from "@mui/material";
+import Markdown from "markdown-to-jsx";
+import definitions from "../../static/definitions.json";
+
 import AddCircleIcon from "@mui/icons-material/AddCircle";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 
@@ -71,7 +75,9 @@ export function OptionOidc({ name }: { name: string }) {
         <table>
           <tbody>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsBypassConsent")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsBypassConsent")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -107,7 +113,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsIDTokenForceClaims")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsIDTokenForceClaims")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -144,7 +152,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsAccessTokenJWT")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsAccessTokenJWT")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -180,7 +190,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsAccessTokenClaims")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsAccessTokenClaims")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -217,7 +229,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsRefreshToken")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsRefreshToken")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -253,7 +267,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsUserIDAttr")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsUserIDAttr")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -283,7 +299,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsAdditionalAudiences")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsAdditionalAudiences")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -324,8 +342,12 @@ export function OptionOidc({ name }: { name: string }) {
             <table id="oidcRPMetaDataOptionsExtraClaims">
               <thead>
                 <tr>
-                  <th>{t("keys")}</th>
-                  <th>{t("values")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("keys")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("values")}</th>
+                  </Tooltip>
                   <Button
                     className="plus"
                     onClick={() =>
@@ -361,8 +383,12 @@ export function OptionOidc({ name }: { name: string }) {
             <table id="oidcRPMetaDataScopeRules">
               <thead>
                 <tr>
-                  <th>{t("keys")}</th>
-                  <th>{t("values")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("keys")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("values")}</th>
+                  </Tooltip>
                   <Button
                     className="plus"
                     onClick={() => dispatch(newOidcRPMetaDataScopeRules(name))}
@@ -395,7 +421,9 @@ export function OptionOidc({ name }: { name: string }) {
         <table>
           <tbody>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsIDTokenSignAlg")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsIDTokenSignAlg")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel>
@@ -433,7 +461,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsAccessTokenSignAlg")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsAccessTokenSignAlg")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel>
@@ -472,7 +502,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsUserInfoSignAlg")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsUserInfoSignAlg")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel shrink>
@@ -508,7 +540,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsRequirePKCE")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsRequirePKCE")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -544,7 +578,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsAllowOffline")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsAllowOffline")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -580,7 +616,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsAllowPasswordGrant")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsAllowPasswordGrant")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -617,7 +655,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsAllowClientCredentialsGrant")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsAllowClientCredentialsGrant")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -656,7 +696,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsRequestUris")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsRequestUris")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -686,7 +728,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsAuthnLevel")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsAuthnLevel")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -716,7 +760,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsRule")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsRule")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -746,7 +792,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsAccessTokenEncKeyMgtAlg")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsAccessTokenEncKeyMgtAlg")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel shrink>
@@ -782,7 +830,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsAccessTokenEncContentEncAlg")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsAccessTokenEncContentEncAlg")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel>
@@ -825,7 +875,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsIdTokenEncKeyMgtAlg")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsIdTokenEncKeyMgtAlg")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel shrink>
@@ -865,7 +917,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsIdTokenEncContentEncAlg")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsIdTokenEncContentEncAlg")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel>
@@ -906,7 +960,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsUserInfoEncKeyMgtAlg")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsUserInfoEncKeyMgtAlg")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel shrink>
@@ -946,7 +1002,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsUserInfoEncContentEncAlg")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsUserInfoEncContentEncAlg")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel>
@@ -987,7 +1045,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsLogoutEncKeyMgtAlg")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsLogoutEncKeyMgtAlg")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel shrink>
@@ -1027,7 +1087,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsLogoutEncContentEncAlg")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsLogoutEncContentEncAlg")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel>
@@ -1072,7 +1134,9 @@ export function OptionOidc({ name }: { name: string }) {
         <table>
           <tbody>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsJwksUri")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsJwksUri")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -1179,7 +1243,9 @@ export function OptionOidc({ name }: { name: string }) {
         <table>
           <tbody>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsAuthorizationCodeExpiration")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsAuthorizationCodeExpiration")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -1209,7 +1275,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsIDTokenExpiration")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsIDTokenExpiration")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -1238,7 +1306,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsAccessTokenExpiration")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsAccessTokenExpiration")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -1267,7 +1337,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsOfflineSessionExpiration")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsOfflineSessionExpiration")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -1302,7 +1374,9 @@ export function OptionOidc({ name }: { name: string }) {
         <table>
           <tbody>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsLogoutBypassConfirm")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsLogoutBypassConfirm")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -1339,7 +1413,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsLogoutSessionRequired")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsLogoutSessionRequired")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -1376,7 +1452,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsLogoutType")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsLogoutType")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel>
@@ -1414,7 +1492,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsLogoutUrl")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsLogoutUrl")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -1443,7 +1523,9 @@ export function OptionOidc({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("oidcRPMetaDataOptionsPostLogoutRedirectUris")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("oidcRPMetaDataOptionsPostLogoutRedirectUris")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
diff --git a/src/components/applicationsComponents/OptionSaml.tsx b/src/components/applicationsComponents/OptionSaml.tsx
index 277eb4e..8dbec01 100644
--- a/src/components/applicationsComponents/OptionSaml.tsx
+++ b/src/components/applicationsComponents/OptionSaml.tsx
@@ -12,7 +12,10 @@ import {
   MenuItem,
   Select,
   TextField,
+  Tooltip,
 } from "@mui/material";
+import Markdown from "markdown-to-jsx";
+import definitions from "../../static/definitions.json";
 
 export function OptionSaml({ name }: { name: string }) {
   const data = useAppSelector((state) =>
@@ -45,7 +48,9 @@ export function OptionSaml({ name }: { name: string }) {
         <table>
           <tbody>
             <tr>
-              <th>{t("samlSPMetaDataOptionsNameIDFormat")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsNameIDFormat")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel shrink>
@@ -79,7 +84,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsNameIDSessionKey")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsNameIDSessionKey")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -105,7 +112,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsOneTimeUse")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsOneTimeUse")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -136,7 +145,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsSessionNotOnOrAfterTimeout")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsSessionNotOnOrAfterTimeout")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -161,7 +172,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsNotOnOrAfterTimeout")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsNotOnOrAfterTimeout")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -183,7 +196,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsForceUTF8")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsForceUTF8")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -220,7 +235,9 @@ export function OptionSaml({ name }: { name: string }) {
         <table>
           <tbody>
             <tr>
-              <th>{t("samlSPMetaDataOptionsSignatureMethod")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsSignatureMethod")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel shrink>
@@ -254,7 +271,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsSignSSOMessage")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsSignSSOMessage")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -285,7 +304,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsCheckSSOMessageSignature")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsCheckSSOMessageSignature")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -317,7 +338,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsSignatureMethod")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsSignatureMethod")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel shrink>
@@ -351,7 +374,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsSignSLOMessage")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsSignSLOMessage")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -387,7 +412,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsCheckSLOMessageSignature")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsCheckSLOMessageSignature")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -425,7 +452,9 @@ export function OptionSaml({ name }: { name: string }) {
         <table>
           <tbody>
             <tr>
-              <th>{t("samlSPMetaDataOptionsEncryptionMode")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsEncryptionMode")}</th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel shrink>
@@ -459,7 +488,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsEnableIDPInitiatedURL")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsEnableIDPInitiatedURL")}</th>
+              </Tooltip>
               <td>
                 <FormControl>
                   <RadioGroup
@@ -490,7 +521,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsAuthnLevel")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsAuthnLevel")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -512,7 +545,9 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsRule")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsRule")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -540,7 +575,9 @@ export function OptionSaml({ name }: { name: string }) {
         <table>
           <tbody>
             <tr>
-              <th>{t("samlSPMetaDataOptionsFederationEntityID")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>{t("samlSPMetaDataOptionsFederationEntityID")}</th>
+              </Tooltip>
               <td>
                 <TextField
                   size="small"
@@ -566,7 +603,11 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsFederationOptionalAttributes")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>
+                  {t("samlSPMetaDataOptionsFederationOptionalAttributes")}
+                </th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel shrink>
@@ -605,7 +646,11 @@ export function OptionSaml({ name }: { name: string }) {
               </td>
             </tr>
             <tr>
-              <th>{t("samlSPMetaDataOptionsFederationRequiredAttributes")}</th>
+              <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                <th>
+                  {t("samlSPMetaDataOptionsFederationRequiredAttributes")}
+                </th>
+              </Tooltip>
               <td>
                 <FormControl sx={{ m: 1, minWidth: 120 }}>
                   <InputLabel shrink>
diff --git a/src/components/applicationsComponents/SAMLApp.tsx b/src/components/applicationsComponents/SAMLApp.tsx
index 28059d6..7e17b25 100644
--- a/src/components/applicationsComponents/SAMLApp.tsx
+++ b/src/components/applicationsComponents/SAMLApp.tsx
@@ -27,7 +27,11 @@ import {
   Select,
   TextField,
   styled,
+  Tooltip,
 } from "@mui/material";
+import Markdown from "markdown-to-jsx";
+import definitions from "../../static/definitions.json";
+
 import AddCircleIcon from "@mui/icons-material/AddCircle";
 import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
 
@@ -337,11 +341,21 @@ export function SAMLApp({ name }: { name: string }) {
             <table id="exportedAttribute">
               <thead>
                 <tr>
-                  <th>{t("variableName")}</th>
-                  <th>{t("attributeName")}</th>
-                  <th>{t("friendlyName")}</th>
-                  <th>{t("mandatory")}</th>
-                  <th>{t("format")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("variableName")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("attributeName")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("friendlyName")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("mandatory")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("format")}</th>
+                  </Tooltip>
                   <th>
                     <Button
                       onClick={() =>
@@ -375,8 +389,12 @@ export function SAMLApp({ name }: { name: string }) {
             <table id="samlSPMetaDataMacros">
               <thead>
                 <tr>
-                  <th>{t("keys")}</th>
-                  <th>{t("values")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("keys")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("values")}</th>
+                  </Tooltip>
                   <th>
                     <Button
                       className="plus"
diff --git a/src/components/authParamOptions/OptionRenderer.tsx b/src/components/authParamOptions/OptionRenderer.tsx
index d907914..9f0f374 100644
--- a/src/components/authParamOptions/OptionRenderer.tsx
+++ b/src/components/authParamOptions/OptionRenderer.tsx
@@ -11,7 +11,11 @@ import {
   RadioGroup,
   Select,
   TextField,
+  Tooltip,
 } from "@mui/material";
+import Markdown from "markdown-to-jsx";
+import definitions from "../../static/definitions.json";
+
 import tree from "../../static/tree.json";
 import attributes from "../../static/attributes.json";
 import { t } from "i18next";
@@ -148,9 +152,15 @@ function cmbModuleContainer(
       <table id="combTable">
         <thead>
           <tr>
-            <th>{t("name")}</th>
-            <th>{t("type")}</th>
-            <th>{t("use")}</th>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <th>{t("name")}</th>
+            </Tooltip>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <th>{t("type")}</th>
+            </Tooltip>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <th>{t("use")}</th>
+            </Tooltip>
             <th>
               <Button className="plus" onClick={() => dispatch(newCombParam())}>
                 <AddCircleIcon color="success" />
@@ -255,8 +265,12 @@ function cmbModuleContainer(
           <table id={`overParam${key}`}>
             <thead>
               <tr>
-                <th>{t("overPrm")}</th>
-                <th>{t("value")}</th>
+                <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                  <th>{t("overPrm")}</th>
+                </Tooltip>
+                <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                  <th>{t("value")}</th>
+                </Tooltip>
                 <th>
                   <Button
                     className="plus"
@@ -287,12 +301,24 @@ function authChoiceContainer(data: Record<string, string>, dispatch: Function) {
       <table id="choiceParam">
         <thead>
           <tr>
-            <th>{t("name")}</th>
-            <th>{t("authentication")}</th>
-            <th>{t("userDB")}</th>
-            <th>{t("passwordDB")}</th>
-            <th>{t("url")}</th>
-            <th>{t("condition")}</th>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <th>{t("name")}</th>
+            </Tooltip>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <th>{t("authentication")}</th>
+            </Tooltip>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <th>{t("userDB")}</th>
+            </Tooltip>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <th>{t("passwordDB")}</th>
+            </Tooltip>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <th>{t("url")}</th>
+            </Tooltip>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <th>{t("condition")}</th>
+            </Tooltip>
             <th>
               <Button
                 className="plus"
@@ -459,8 +485,12 @@ function authChoiceContainer(data: Record<string, string>, dispatch: Function) {
             <table id={`overParam${key}`}>
               <thead>
                 <tr>
-                  <th>{t("overPrm")}</th>
-                  <th>{t("value")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("overPrm")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("value")}</th>
+                  </Tooltip>
                   <th>
                     <Button
                       className="plus"
@@ -510,7 +540,9 @@ function RecursRender(
       case "int":
         return (
           <ul>
-            <strong className="title3">{t(el)}</strong>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <strong className="title3">{t(el)}</strong>
+            </Tooltip>
             <TextField
               size="small"
               type="number"
@@ -530,7 +562,9 @@ function RecursRender(
       case "text":
         return (
           <ul>
-            <strong className="title3">{t(el)}</strong>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <strong className="title3">{t(el)}</strong>
+            </Tooltip>
             <TextField
               size="small"
               type="text"
@@ -550,7 +584,9 @@ function RecursRender(
       case "PerlModule":
         return (
           <ul>
-            <strong className="title3">{t(el)}</strong>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <strong className="title3">{t(el)}</strong>
+            </Tooltip>
             <TextField
               size="small"
               type="text"
@@ -570,7 +606,9 @@ function RecursRender(
       case "password":
         return (
           <ul>
-            <strong className="title3">{t(el)}</strong>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <strong className="title3">{t(el)}</strong>
+            </Tooltip>
             <TextField
               size="small"
               type="password"
@@ -590,7 +628,9 @@ function RecursRender(
       case "intOrNull":
         return (
           <ul>
-            <strong className="title3">{t(el)}</strong>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <strong className="title3">{t(el)}</strong>
+            </Tooltip>
             <TextField
               size="small"
               type="number"
@@ -610,7 +650,9 @@ function RecursRender(
       case "authChoiceContainer":
         return (
           <>
-            <strong className="title3">{t(el)}</strong>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <strong className="title3">{t(el)}</strong>
+            </Tooltip>
             {authChoiceContainer(
               config[el as keyof llngConfig] as Record<string, string>,
               dispatch
@@ -620,7 +662,9 @@ function RecursRender(
       case "cmbModuleContainer":
         return (
           <>
-            <strong className="title3">{t(el)}</strong>{" "}
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <strong className="title3">{t(el)}</strong>
+            </Tooltip>
             {cmbModuleContainer(
               config[el as keyof llngConfig] as Record<
                 string,
@@ -696,12 +740,18 @@ function RecursRender(
       case "keyTextContainer":
         return (
           <>
-            <strong className="title3">{t(el)}</strong>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <strong className="title3">{t(el)}</strong>
+            </Tooltip>
             <table id={el + "Table"}>
               <thead>
                 <tr>
-                  <th>{t("keys")}</th>
-                  <th>{t("values")}</th>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("keys")}</th>
+                  </Tooltip>
+                  <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                    <th>{t("values")}</th>
+                  </Tooltip>
                   <th>
                     <Button
                       className="plus"
@@ -728,7 +778,9 @@ function RecursRender(
       case "url":
         return (
           <ul>
-            <strong className="title3">{t(el)}</strong>
+            <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+              <strong className="title3">{t(el)}</strong>
+            </Tooltip>
             <TextField
               size="small"
               type="url"
diff --git a/src/components/managerComponents/MandatoryFields.tsx b/src/components/managerComponents/MandatoryFields.tsx
index 94b2050..40c1217 100644
--- a/src/components/managerComponents/MandatoryFields.tsx
+++ b/src/components/managerComponents/MandatoryFields.tsx
@@ -17,7 +17,10 @@ import {
   TextField,
   Button,
   styled,
+  Tooltip,
 } from "@mui/material";
+import Markdown from "markdown-to-jsx";
+import definitions from "../../static/definitions.json";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import { ChangeEvent } from "react";
 
@@ -113,7 +116,9 @@ export function MandatoryFields({
           <table>
             <tbody>
               <tr>
-                <th>{t("oidcRPMetaDataOptionsClientID")}</th>
+                <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                  <th>{t("oidcRPMetaDataOptionsClientID")}</th>
+                </Tooltip>
                 <td>
                   <TextField
                     size="small"
@@ -148,7 +153,9 @@ export function MandatoryFields({
                 </td>
               </tr>
               <tr>
-                <th>{t("oidcRPMetaDataOptionsClientSecret")}</th>
+                <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                  <th>{t("oidcRPMetaDataOptionsClientSecret")}</th>
+                </Tooltip>
                 <td>
                   <TextField
                     size="small"
@@ -181,7 +188,9 @@ export function MandatoryFields({
                 </td>
               </tr>
               <tr>
-                <th>{t("oidcRPMetaDataOptionsPublic")}</th>
+                <Tooltip title={<Markdown>{definitions.test}</Markdown>}>
+                  <th>{t("oidcRPMetaDataOptionsPublic")}</th>
+                </Tooltip>
                 <td>
                   <FormControl>
                     <RadioGroup
diff --git a/src/static/definitions.json b/src/static/definitions.json
new file mode 100644
index 0000000..607b390
--- /dev/null
+++ b/src/static/definitions.json
@@ -0,0 +1,3 @@
+{
+    "test": "## définition courte et efficace du parametre\n Le formatage de la définition est du **markdown** stocké dans un _JSON_"
+}
\ No newline at end of file