diff --git a/packages/react-components/src/Tooltip.tsx b/packages/react-components/src/Tooltip.tsx
index 10871ebeaa..0eab068c86 100644
--- a/packages/react-components/src/Tooltip.tsx
+++ b/packages/react-components/src/Tooltip.tsx
@@ -7,8 +7,6 @@ import ReactDOM from 'react-dom';
 import ReactTooltip from 'react-tooltip';
 import styled from 'styled-components';
 
-import { classes } from './util';
-
 const rootElement = typeof document === 'undefined'
   ? null // This hack is required for server side rendering
   : document.getElementById('tooltips');
@@ -45,7 +43,7 @@ function Tooltip ({ className = '', effect = 'solid', offset, place = 'top', tex
 
   return ReactDOM.createPortal(
     <ReactTooltip
-      className={classes('ui--Tooltip', className)}
+      className={`ui--Tooltip ${className}`}
       effect={effect}
       id={trigger}
       offset={offset}
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index 8b1ae75eb3..5fb153f2a1 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -11,6 +11,7 @@ import { formatBalance } from '@polkadot/util';
 import { useTranslation } from './translate';
 
 interface Props {
+  children?: React.ReactNode;
   className?: string;
   isShort?: boolean;
   label?: React.ReactNode;
@@ -35,7 +36,7 @@ function format (value: Compact<any> | BN | string, currency: string, withSi?: b
   return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && (<><span className='ui--FormatBalance-postfix'>{`000${postfix || ''}`.slice(-3)}</span></>)} {`${currency}${labelPost || ''}`}</>;
 }
 
-function FormatBalance ({ className = '', isShort, label, labelPost, value, withSi }: Props): React.ReactElement<Props> {
+function FormatBalance ({ children, className = '', isShort, label, labelPost, value, withSi }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [currency] = useState(formatBalance.getDefaults().unit);
 
@@ -48,7 +49,7 @@ function FormatBalance ({ className = '', isShort, label, labelPost, value, with
             ? t<string>('everything{{labelPost}}', { replace: { labelPost } })
             : format(value, currency, withSi, isShort, labelPost)
           : `-${labelPost || ''}`
-      }</span>
+      }</span>{children}
     </div>
   );
 }