fix: tooltip doesn't stay open

new-lamassu-admin/src/components/Tooltip.js

@@ -13,6 +13,16 @@ const useStyles = makeStyles({
     cursor: 'pointer',
     marginTop: 4
   },
+  relativelyPositioned: {
+    position: 'relative'
+  },
+  safeSpace: {
+    position: 'absolute',
+    backgroundColor: '#0000',
+    height: 40,
+    left: '-50%',
+    width: '200%'
+  },
   popoverContent: ({ width }) => ({
     width,
     padding: [[10, 15]]
@@ -27,6 +37,10 @@ const usePopperHandler = width => {
     setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget)
   }
 
+  const openHelpPopper = event => {
+    setHelpPopperAnchorEl(event.currentTarget)
+  }
+
   const handleCloseHelpPopper = () => {
     setHelpPopperAnchorEl(null)
   }
@@ -38,25 +52,32 @@ const usePopperHandler = width => {
     helpPopperAnchorEl,
     helpPopperOpen,
     handleOpenHelpPopper,
+    openHelpPopper,
     handleCloseHelpPopper
   }
 }
 
-const Tooltip = memo(({ children, width, Icon = HelpIcon }) => {
+const HelpTooltip = memo(({ children, width }) => {
   const handler = usePopperHandler(width)
 
   return (
     <ClickAwayListener onClickAway={handler.handleCloseHelpPopper}>
-      <div>
+      <div
+        className={handler.classes.relativelyPositioned}
+        onMouseLeave={handler.handleCloseHelpPopper}>
+        {handler.helpPopperOpen && (
+          <div className={handler.classes.safeSpace}></div>
+        )}
         <button
           type="button"
           className={handler.classes.transparentButton}
-          onClick={handler.handleOpenHelpPopper}>
+          onMouseEnter={handler.openHelpPopper}>
-          <Icon />
+          <HelpIcon />
         </button>
         <Popper
           open={handler.helpPopperOpen}
           anchorEl={handler.helpPopperAnchorEl}
+          arrowEnabled={true}
           placement="bottom">
           <div className={handler.classes.popoverContent}>{children}</div>
         </Popper>
@@ -96,4 +117,4 @@ const HoverableTooltip = memo(({ parentElements, children, width }) => {
   )
 })
 
-export { Tooltip, HoverableTooltip }
+export { HoverableTooltip, HelpTooltip }

new-lamassu-admin/src/pages/Accounting/Accounting.js

@@ -6,7 +6,7 @@ import * as R from 'ramda'
 import React, { useContext } from 'react'
 
 import AppContext from 'src/AppContext'
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
 import TitleSection from 'src/components/layout/TitleSection'
 import DataTable from 'src/components/tables/DataTable'
 import { H4, Info2, P } from 'src/components/typography'
@@ -128,9 +128,9 @@ const Accounting = () => {
           <span className={classes.operation}>
             {it.description}
             {!!it.extraInfo && (
-              <HoverableTooltip width={175}>
+              <HelpTooltip width={175}>
                 <P>{it.extraInfo}</P>
-              </HoverableTooltip>
+              </HelpTooltip>
             )}
           </span>
         )

new-lamassu-admin/src/pages/Blacklist/Blacklist.js

@@ -7,8 +7,13 @@ import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
-import { Link, Button, IconButton } from 'src/components/buttons'
+import {
+  Link,
+  Button,
+  IconButton,
+  SupportLinkButton
+} from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import Sidebar from 'src/components/layout/Sidebar'
 import TitleSection from 'src/components/layout/TitleSection'
@@ -251,13 +256,13 @@ const Blacklist = () => {
                 value={enablePaperWalletOnly}
               />
               <Label2>{enablePaperWalletOnly ? 'On' : 'Off'}</Label2>
-              <HoverableTooltip width={304}>
+              <HelpTooltip width={304}>
                 <P>
                   The "Enable paper wallet (only)" option means that only paper
                   wallets will be printed for users, and they won't be permitted
                   to scan an address from their own wallet.
                 </P>
-              </HoverableTooltip>
+              </HelpTooltip>
             </Box>
             <Box
               display="flex"
@@ -273,13 +278,21 @@ const Blacklist = () => {
                 value={rejectAddressReuse}
               />
               <Label2>{rejectAddressReuse ? 'On' : 'Off'}</Label2>
-              <HoverableTooltip width={304}>
+              <HelpTooltip width={304}>
                 <P>
                   The "Reject reused addresses" option means that all addresses
                   that are used once will be automatically rejected if there's
                   an attempt to use them again on a new transaction.
                 </P>
-              </HoverableTooltip>
+                <P>
+                  For details please read the relevant knowledgebase article:
+                </P>
+                <SupportLinkButton
+                  link="https://support.lamassu.is/hc/en-us/articles/360033622211-Reject-Address-Reuse"
+                  label="Reject Address Reuse"
+                  bottomSpace="1"
+                />
+              </HelpTooltip>
             </Box>
           </Box>
           <BlacklistTable

new-lamassu-admin/src/pages/Cashout/Cashout.js

@@ -4,7 +4,8 @@ import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
+import { SupportLinkButton } from 'src/components/buttons'
 import { NamespacedTable as EditableTable } from 'src/components/editableTable'
 import { Switch } from 'src/components/inputs'
 import TitleSection from 'src/components/layout/TitleSection'
@@ -92,7 +93,21 @@ const CashOut = ({ name: SCREEN_KEY }) => {
   return (
     !loading && (
       <>
-        <TitleSection title="Cash-out">
+        <TitleSection
+          title="Cash-out"
+          appendix={
+            <HelpTooltip width={320}>
+              <P>
+                For details on configuring cash-out, please read the relevant
+                knowledgebase article:
+              </P>
+              <SupportLinkButton
+                link="https://support.lamassu.is/hc/en-us/articles/115003720192-Enabling-cash-out-on-the-admin"
+                label="Enabling cash-out on the admin"
+                bottomSpace="1"
+              />
+            </HelpTooltip>
+          }>
           <div className={classes.fudgeFactor}>
             <P>Transaction fudge factor</P>
             <Switch
@@ -105,7 +120,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
             <Label2 className={classes.switchLabel}>
               {fudgeFactorActive ? 'On' : 'Off'}
             </Label2>
-            <HoverableTooltip width={304}>
+            <HelpTooltip width={304}>
               <P>
                 Automatically accept customer deposits as complete if their
                 received amount is 100 crypto atoms or less.
@@ -114,7 +129,13 @@ const CashOut = ({ name: SCREEN_KEY }) => {
                 (Crypto atoms are the smallest unit in each cryptocurrency.
                 E.g., satoshis in Bitcoin, or wei in Ethereum.)
               </P>
-            </HoverableTooltip>
+              <P>For details please read the relevant knowledgebase article:</P>
+              <SupportLinkButton
+                link="https://support.lamassu.is/hc/en-us/articles/360050838011-Automatically-accepting-undersent-deposits-with-Fudge-Factor-"
+                label="Lamassu Support Article"
+                bottomSpace="1"
+              />
+            </HelpTooltip>
           </div>
         </TitleSection>
         <EditableTable

new-lamassu-admin/src/pages/Commissions/Commissions.js

@@ -4,12 +4,16 @@ import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
+import { HelpTooltip } from 'src/components/Tooltip'
+import { SupportLinkButton } from 'src/components/buttons'
 import TitleSection from 'src/components/layout/TitleSection'
 import { ReactComponent as ReverseListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/white.svg'
 import { ReactComponent as ListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/zodiac.svg'
 import { ReactComponent as OverrideLabelIcon } from 'src/styling/icons/status/spring2.svg'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
+import { P } from '../../components/typography'
+
 import CommissionsDetails from './components/CommissionsDetails'
 import CommissionsList from './components/CommissionsList'
 
@@ -118,6 +122,24 @@ const Commissions = ({ name: SCREEN_KEY }) => {
           }
         ]}
         iconClassName={classes.listViewButton}
+        appendix={
+          <HelpTooltip width={320}>
+            <P>
+              For details about commissions, please read the relevant
+              knowledgebase articles:
+            </P>
+            <SupportLinkButton
+              link="https://support.lamassu.is/hc/en-us/articles/115001211752-Fixed-fees-Minimum-transaction"
+              label="Fixed fees & Minimum transaction"
+              bottomSpace="1"
+            />
+            <SupportLinkButton
+              link="https://support.lamassu.is/hc/en-us/articles/360061558352-Commissions-and-Profit-Calculations"
+              label="SCommissions and Profit Calculations"
+              bottomSpace="1"
+            />
+          </HelpTooltip>
+        }
       />
 
       {!showMachines && !loading && (

new-lamassu-admin/src/pages/Customers/components/EditableCard.js

@@ -8,6 +8,7 @@ import { useState, React, useRef } from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
 import { MainStatus } from 'src/components/Status'
+// import { HelpTooltip } from 'src/components/Tooltip'
 import { ActionButton } from 'src/components/buttons'
 import { Label1, P, H3 } from 'src/components/typography'
 import {
@@ -182,7 +183,7 @@ const EditableCard = ({
               <H3 className={classes.cardTitle}>{title}</H3>
               {
                 // TODO: Enable for next release
-                /* <HoverableTooltip width={304}></HoverableTooltip> */
+                /* <HelpTooltip width={304}></HelpTooltip> */
               }
             </div>
             {state && authorize && (

new-lamassu-admin/src/pages/Locales/Locales.js

@@ -5,7 +5,8 @@ import * as R from 'ramda'
 import React, { useState } from 'react'
 
 import Modal from 'src/components/Modal'
-import { Link } from 'src/components/buttons'
+import { HelpTooltip } from 'src/components/Tooltip'
+import { Link, SupportLinkButton } from 'src/components/buttons'
 import { Table as EditableTable } from 'src/components/editableTable'
 import Section from 'src/components/layout/Section'
 import TitleSection from 'src/components/layout/TitleSection'
@@ -176,7 +177,22 @@ const Locales = ({ name: SCREEN_KEY }) => {
         close={() => setDataToSave(null)}
         save={() => dataToSave && save(dataToSave)}
       />
-      <TitleSection title="Locales" />
+      <TitleSection
+        title="Locales"
+        appendix={
+          <HelpTooltip width={320}>
+            <P>
+              For details on configuring languages, please read the relevant
+              knowledgebase article:
+            </P>
+            <SupportLinkButton
+              link="https://support.lamassu.is/hc/en-us/articles/360016257471-Setting-multiple-machine-languages"
+              label="Setting multiple machine languages"
+              bottomSpace="1"
+            />
+          </HelpTooltip>
+        }
+      />
       <Section>
         <EditableTable
           title="Default settings"

new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.js

@@ -6,7 +6,7 @@ import * as Yup from 'yup'
 
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
 import { Button } from 'src/components/buttons'
 import { NumberInput, Autocomplete } from 'src/components/inputs/formik'
 import { H3, TL1, P } from 'src/components/typography'
@@ -99,7 +99,7 @@ const IndividualDiscountModal = ({
                 <div>
                   <div className={classes.discountRateWrapper}>
                     <H3>Define discount rate</H3>
-                    <HoverableTooltip width={304}>
+                    <HelpTooltip width={304}>
                       <P>
                         This is a percentage discount off of your existing
                         commission rates for a customer entering this code at
@@ -110,7 +110,7 @@ const IndividualDiscountModal = ({
                         code is set for 50%, then you'll instead be charging 4%
                         on transactions using the code.
                       </P>
-                    </HoverableTooltip>
+                    </HelpTooltip>
                   </div>
                   <div className={classes.discountInput}>
                     <Field

new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.js

@@ -6,7 +6,7 @@ import * as Yup from 'yup'
 
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
 import { Button } from 'src/components/buttons'
 import { TextInput, NumberInput } from 'src/components/inputs/formik'
 import { H3, TL1, P } from 'src/components/typography'
@@ -69,7 +69,7 @@ const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
               />
               <div className={classes.modalLabel2Wrapper}>
                 <H3 className={classes.modalLabel2}>Define discount rate</H3>
-                <HoverableTooltip width={304}>
+                <HelpTooltip width={304}>
                   <P>
                     This is a percentage discount off of your existing
                     commission rates for a customer entering this code at the
@@ -80,7 +80,7 @@ const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
                     set for 50%, then you'll instead be charging 4% on
                     transactions using the code.
                   </P>
-                </HoverableTooltip>
+                </HelpTooltip>
               </div>
               <div className={classes.discountInput}>
                 <Field

new-lamassu-admin/src/pages/Maintenance/CashUnits.js

@@ -6,7 +6,8 @@ import React, { useState } from 'react'
 
 import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
 import Modal from 'src/components/Modal'
-import { IconButton, Button } from 'src/components/buttons'
+import { HelpTooltip } from 'src/components/Tooltip.js'
+import { IconButton, Button, SupportLinkButton } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs'
 import TitleSection from 'src/components/layout/TitleSection'
 import { EmptyTable } from 'src/components/table'
@@ -229,7 +230,20 @@ const CashCassettes = () => {
             }
           ]}
           iconClassName={classes.listViewButton}
-          className={classes.tableWidth}>
+          className={classes.tableWidth}
+          appendix={
+            <HelpTooltip width={220}>
+              <P>
+                For details on configuring cash boxes and cassettes, please read
+                the relevant knowledgebase article:
+              </P>
+              <SupportLinkButton
+                link="https://support.lamassu.is/hc/en-us/articles/4420839641229-Cash-Boxes-Cassettess"
+                label="Cash Boxes & Cassettes"
+                bottomSpace="1"
+              />
+            </HelpTooltip>
+          }>
           {!showHistory && (
             <Box alignItems="center" justifyContent="flex-end">
               <Label1 className={classes.cashboxReset}>Cash box resets</Label1>

new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.js

@@ -6,7 +6,7 @@ import React from 'react'
 
 import ErrorMessage from 'src/components/ErrorMessage'
 import Stepper from 'src/components/Stepper'
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
 import { Button } from 'src/components/buttons'
 import { Cashbox } from 'src/components/inputs/cashbox/Cashbox'
 import { NumberInput, RadioGroup } from 'src/components/inputs/formik'
@@ -245,12 +245,12 @@ const WizardStep = ({
                         classes.centerAlignment
                       )}>
                       <P>Since previous update</P>
-                      <HoverableTooltip width={215}>
+                      <HelpTooltip width={215}>
                         <P>
                           Number of bills inside the cash box, since the last
                           cash box changes.
                         </P>
-                      </HoverableTooltip>
+                      </HelpTooltip>
                     </div>
                     <div
                       className={classnames(

new-lamassu-admin/src/pages/Notifications/Notifications.js

@@ -4,6 +4,8 @@ import * as R from 'ramda'
 import React, { useState } from 'react'
 
 import Modal from 'src/components/Modal'
+import { HelpTooltip } from 'src/components/Tooltip'
+import { SupportLinkButton } from 'src/components/buttons'
 import TitleSection from 'src/components/layout/TitleSection'
 import { P } from 'src/components/typography'
 import FormRenderer from 'src/pages/Services/FormRenderer'
@@ -159,7 +161,24 @@ const Notifications = ({
     !loading && (
       <>
         <NotificationsCtx.Provider value={contextValue}>
-          {displayTitle && <TitleSection title="Notifications" />}
+          {displayTitle && (
+            <TitleSection
+              title="Notifications"
+              appendix={
+                <HelpTooltip width={250}>
+                  <P>
+                    For details on configuring notifications, please read the
+                    relevant knowledgebase article:
+                  </P>
+                  <SupportLinkButton
+                    link="https://support.lamassu.is/hc/en-us/articles/115001210592-Enabling-notifications"
+                    label="Enabling notifications"
+                    bottomSpace="1"
+                  />
+                </HelpTooltip>
+              }
+            />
+          )}
           {displayThirdPartyProvider && (
             <Section
               title="Third party providers"

new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.js

@@ -3,12 +3,14 @@ import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
 import React, { memo } from 'react'
 
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
 import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
 import { Switch } from 'src/components/inputs'
 import { H4, P, Label2 } from 'src/components/typography'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
+import { SupportLinkButton } from '../../components/buttons'
+
 import { global } from './OperatorInfo.styles'
 
 const useStyles = makeStyles(global)
@@ -66,7 +68,7 @@ const CoinATMRadar = memo(({ wizard }) => {
       <div>
         <div className={classes.header}>
           <H4>Coin ATM Radar share settings</H4>
-          <HoverableTooltip width={304}>
+          <HelpTooltip width={320}>
             <P>
               For details on configuring this panel, please read the relevant
               knowledgebase article{' '}
@@ -78,7 +80,12 @@ const CoinATMRadar = memo(({ wizard }) => {
               </a>
               .
             </P>
-          </HoverableTooltip>
+            <SupportLinkButton
+              link="https://support.lamassu.is/hc/en-us/articles/360023720472-Coin-ATM-Radar"
+              label="Lamassu Support Article"
+              bottomSpace="1"
+            />
+          </HelpTooltip>
         </div>
         <Row
           title={'Share information?'}

new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js

@@ -9,7 +9,8 @@ import * as Yup from 'yup'
 
 import ErrorMessage from 'src/components/ErrorMessage'
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
-import { Link, IconButton } from 'src/components/buttons'
+import { HelpTooltip } from 'src/components/Tooltip'
+import { Link, IconButton, SupportLinkButton } from 'src/components/buttons'
 import Switch from 'src/components/inputs/base/Switch'
 import { TextInput } from 'src/components/inputs/formik'
 import { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography'
@@ -189,6 +190,17 @@ const ContactInfo = ({ wizard }) => {
     <>
       <div className={classes.header}>
         <H4>Contact information</H4>
+        <HelpTooltip width={320}>
+          <P>
+            For details on configuring this panel, please read the relevant
+            knowledgebase article:
+          </P>
+          <SupportLinkButton
+            link="https://support.lamassu.is/hc/en-us/articles/360033051732-Enabling-Operator-Info"
+            label="Lamassu Support Article"
+            bottomSpace="1"
+          />
+        </HelpTooltip>
       </div>
       <div className={classes.switchRow}>
         <P>Info card enabled?</P>

new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.js

@@ -4,11 +4,14 @@ import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { memo } from 'react'
 
+import { HelpTooltip } from 'src/components/Tooltip'
 import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
 import { Switch } from 'src/components/inputs'
 import { H4, P, Label2 } from 'src/components/typography'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
+import { SupportLinkButton } from '../../components/buttons'
+
 import { global } from './OperatorInfo.styles'
 
 const useStyles = makeStyles(global)
@@ -47,6 +50,17 @@ const ReceiptPrinting = memo(({ wizard }) => {
     <>
       <div className={classes.header}>
         <H4>Receipt options</H4>
+        <HelpTooltip width={320}>
+          <P>
+            For details on configuring this panel, please read the relevant
+            knowledgebase article:
+          </P>
+          <SupportLinkButton
+            link="https://support.lamassu.is/hc/en-us/articles/360058513951-Receipt-options-printers"
+            label="Lamassu Support Article"
+            bottomSpace="1"
+          />
+        </HelpTooltip>
       </div>
       <div className={classes.switchRow}>
         <P>Enable receipt printing</P>

new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.js

@@ -4,8 +4,8 @@ import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
-import { IconButton } from 'src/components/buttons'
+import { IconButton, SupportLinkButton } from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import DataTable from 'src/components/tables/DataTable'
 import { H4, P, Label3 } from 'src/components/typography'
@@ -162,9 +162,9 @@ const SMSNotices = () => {
         !R.isEmpty(TOOLTIPS[it.event]) ? (
           <div className={classes.messageWithTooltip}>
             {R.prop('messageName', it)}
-            <HoverableTooltip width={250}>
+            <HelpTooltip width={250}>
               <P>{TOOLTIPS[it.event]}</P>
-            </HoverableTooltip>
+            </HelpTooltip>
           </div>
         ) : (
           R.prop('messageName', it)
@@ -237,6 +237,17 @@ const SMSNotices = () => {
     <>
       <div className={classes.header}>
         <H4>SMS notices</H4>
+        <HelpTooltip width={320}>
+          <P>
+            For details on configuring this panel, please read the relevant
+            knowledgebase article:
+          </P>
+          <SupportLinkButton
+            link="https://support.lamassu.is/hc/en-us/articles/115001205591-SMS-Phone-Verification"
+            label="Lamassu Support Article"
+            bottomSpace="1"
+          />
+        </HelpTooltip>
       </div>
       {showModal && (
         <CustomSMSModal

new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js

@@ -9,7 +9,8 @@ import * as Yup from 'yup'
 
 import ErrorMessage from 'src/components/ErrorMessage'
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
-import { Link, IconButton } from 'src/components/buttons'
+import { HelpTooltip } from 'src/components/Tooltip'
+import { Link, IconButton, SupportLinkButton } from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import { TextInput } from 'src/components/inputs/formik'
 import { H4, Info2, Info3, Label2, Label3, P } from 'src/components/typography'
@@ -171,6 +172,17 @@ const TermsConditions = () => {
     <>
       <div className={classes.header}>
         <H4>Terms &amp; Conditions</H4>
+        <HelpTooltip width={320}>
+          <P>
+            For details on configuring this panel, please read the relevant
+            knowledgebase article:
+          </P>
+          <SupportLinkButton
+            link="https://support.lamassu.is/hc/en-us/articles/360015982211-Terms-and-Conditions"
+            label="Lamassu Support Article"
+            bottomSpace="1"
+          />
+        </HelpTooltip>
       </div>
       <div className={classes.switchRow}>
         <P>Show on screen</P>

new-lamassu-admin/src/pages/Transactions/DetailsCard.js

@@ -11,7 +11,7 @@ import * as R from 'ramda'
 import React, { memo, useState } from 'react'
 
 import { ConfirmDialog } from 'src/components/ConfirmDialog'
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip, HoverableTooltip } from 'src/components/Tooltip'
 import { IDButton, ActionButton } from 'src/components/buttons'
 import { P, Label1 } from 'src/components/typography'
 import { ReactComponent as CardIdInverseIcon } from 'src/styling/icons/ID/card/white.svg'
@@ -358,9 +358,9 @@ const DetailsRow = ({ it: tx, timezone }) => {
           <div className={classes.addressHeader}>
             <Label>Address</Label>
             {!R.isNil(tx.walletScore) && (
-              <HoverableTooltip parentElements={walletScoreEl}>
+              <HelpTooltip parentElements={walletScoreEl}>
                 {`Chain analysis score: ${tx.walletScore}/10`}
-              </HoverableTooltip>
+              </HelpTooltip>
             )}
           </div>
           <div>

new-lamassu-admin/src/pages/Transactions/Transactions.js

@@ -11,6 +11,8 @@ import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
 import SearchBox from 'src/components/SearchBox'
 import SearchFilter from 'src/components/SearchFilter'
 import Title from 'src/components/Title'
+import { HelpTooltip } from 'src/components/Tooltip'
+import { SupportLinkButton } from 'src/components/buttons'
 import DataTable from 'src/components/tables/DataTable'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
@@ -233,7 +235,22 @@ const Transactions = () => {
     },
     {
       header: 'Status',
-      view: it => getStatus(it),
+      view: it => {
+        if (getStatus(it) === 'Pending')
+          return (
+            <div className={classes.pendingBox}>
+              {'Pending'}
+              <HelpTooltip width={285}>
+                <SupportLinkButton
+                  link="https://support.lamassu.is/hc/en-us/articles/115001210452-Cancelling-cash-out-transactions"
+                  label="Cancelling cash-out transactions"
+                  bottomSpace="0"
+                />
+              </HelpTooltip>
+            </div>
+          )
+        else return getStatus(it)
+      },
       textAlign: 'left',
       size: 'sm',
       width: 80

new-lamassu-admin/src/pages/Triggers/Triggers.js

@@ -6,7 +6,7 @@ import * as R from 'ramda'
 import React, { useState } from 'react'
 
 import Modal from 'src/components/Modal'
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
 import { Link, SupportLinkButton } from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import TitleSection from 'src/components/layout/TitleSection'
@@ -187,13 +187,13 @@ const Triggers = () => {
               <Label2 className={classes.switchLabel}>
                 {rejectAddressReuse ? 'On' : 'Off'}
               </Label2>
-              <HoverableTooltip width={304}>
+              <HelpTooltip width={304}>
                 <P>
                   This option requires a user to scan a different cryptocurrency
                   address if they attempt to scan one that had been previously
                   used for a transaction in your network
                 </P>
-              </HoverableTooltip>
+              </HelpTooltip>
             </Box>
           </Box>
         )}

new-lamassu-admin/src/pages/Wallet/Wallet.js

@@ -5,6 +5,8 @@ import * as R from 'ramda'
 import React, { useState } from 'react'
 
 import Modal from 'src/components/Modal'
+import { HelpTooltip } from 'src/components/Tooltip'
+import { SupportLinkButton } from 'src/components/buttons'
 import { NamespacedTable as EditableTable } from 'src/components/editableTable'
 import TitleSection from 'src/components/layout/TitleSection'
 import FormRenderer from 'src/pages/Services/FormRenderer'
@@ -13,6 +15,8 @@ import { ReactComponent as ReverseSettingsIcon } from 'src/styling/icons/circle
 import { ReactComponent as SettingsIcon } from 'src/styling/icons/circle buttons/settings/zodiac.svg'
 import { fromNamespace, toNamespace } from 'src/utils/config'
 
+import { P } from '../../components/typography'
+
 import AdvancedWallet from './AdvancedWallet'
 import styles from './Wallet.styles.js'
 import Wizard from './Wizard'
@@ -124,6 +128,19 @@ const Wallet = ({ name: SCREEN_KEY }) => {
               toggle: setAdvancedSettings
             }
           ]}
+          appendix={
+            <HelpTooltip width={340}>
+              <P>
+                For details on configuring wallets, please read the relevant
+                knowledgebase article:
+              </P>
+              <SupportLinkButton
+                link="https://support.lamassu.is/hc/en-us/articles/360000725832-Wallets-Exchange-Linkage-and-Volatility"
+                label="Wallets, Exchange Linkage, and Volatility"
+                bottomSpace="1"
+              />
+            </HelpTooltip>
+          }
         />
       </div>
       {!advancedSettings && (

new-lamassu-admin/src/pages/Wizard/components/Twilio.js

@@ -5,7 +5,7 @@ import gql from 'graphql-tag'
 import React, { useState } from 'react'
 
 import InfoMessage from 'src/components/InfoMessage'
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
 import { Button, SupportLinkButton } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs'
 import { H1, H4, P } from 'src/components/typography'
@@ -102,7 +102,7 @@ function Twilio({ doContinue }) {
           <H4 noMargin className={classnames(titleClasses)}>
             Will you setup a two way machine or compliance?
           </H4>
-          <HoverableTooltip width={304}>
+          <HelpTooltip width={304}>
             <P>
               Two-way machines allow your customers not only to buy (cash-in)
               but also sell cryptocurrencies (cash-out).
@@ -111,7 +111,7 @@ function Twilio({ doContinue }) {
               You’ll need an SMS service for cash-out transactions and for any
               compliance triggers
             </P>
-          </HoverableTooltip>
+          </HelpTooltip>
         </Box>
 
         <RadioGroup