source tooltip content for advanced price

content/pages/publish.json

@@ -89,5 +89,9 @@
       }
     ],
     "success": "Asset Created!"
+  },
+  "tooltips": {
+    "poolInfo": "Help me",
+    "liquidityProviderFee": "Help me"
   }
 }

src/components/atoms/Markdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import ReactMarkdown from 'react-markdown'
 
 const Markdown = ({
@@ -7,7 +7,7 @@ const Markdown = ({
 }: {
   text: string
   className?: string
-}) => {
+}): ReactElement => {
   // fix react-markdown \n transformation
   // https://github.com/rexxars/react-markdown/issues/105#issuecomment-351585313
   const textCleaned = text.replace(/\\n/g, '\n ')

src/components/molecules/FormFields/Price/Advanced.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
 import stylesIndex from './index.module.css'
 import styles from './Advanced.module.css'
 import FormHelp from '../../../atoms/Input/Help'
@@ -12,6 +13,23 @@ import InputElement from '../../../atoms/Input/InputElement'
 import Label from '../../../atoms/Input/Label'
 import Tooltip from '../../../atoms/Tooltip'
 
+const query = graphql`
+  query PriceAdvancedQuery {
+    tooltips: allFile(filter: { relativePath: { eq: "pages/publish.json" } }) {
+      edges {
+        node {
+          childPagesJson {
+            tooltips {
+              poolInfo
+              liquidityProviderFee
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
 export default function Advanced({
   ocean,
   tokensToMint,
@@ -25,6 +43,9 @@ export default function Advanced({
   liquidityProviderFee: string
   onOceanChange: (event: ChangeEvent<HTMLInputElement>) => void
 }): ReactElement {
+  const data = useStaticQuery(query)
+  const { tooltips } = data.tooltips.edges[0].node.childPagesJson
+
   const { appConfig } = useSiteMetadata()
   const { account, balance, chainId, refreshBalance } = useOcean()
 
@@ -76,7 +97,9 @@ export default function Advanced({
           <Wallet />
         </aside>
 
-        <h4 className={styles.title}>Data Token Liquidity Pool</h4>
+        <h4 className={styles.title}>
+          Data Token Liquidity Pool <Tooltip content={tooltips.poolInfo} />
+        </h4>
 
         <div className={styles.tokens}>
           <Coin
@@ -97,7 +120,8 @@ export default function Advanced({
 
         <footer className={styles.summary}>
           <Label htmlFor="liquidityProviderFee">
-            Liquidity Provider Fee <Tooltip content="Help Me" />
+            Liquidity Provider Fee{' '}
+            <Tooltip content={tooltips.liquidityProviderFee} />
           </Label>
           <InputElement
             value={liquidityProviderFee}