feat(toolbar): new Toolbar to enable reactive state synchronization (#3983)

platform/ui/src/components/Tooltip/Tooltip.tsx

@@ -30,7 +30,16 @@ const arrowPositionStyle = {
   },
 };
 
-const Tooltip = ({ content, isSticky, position, className, tight, children, isDisabled }) => {
+const Tooltip = ({
+  content,
+  secondaryContent = null,
+  isSticky,
+  position,
+  className,
+  tight,
+  children,
+  isDisabled,
+}) => {
   const [isActive, setIsActive] = useState(false);
   const { t } = useTranslation('Buttons');
 
@@ -68,11 +77,14 @@ const Tooltip = ({ content, isSticky, position, className, tight, children, isDi
           className={classnames(
             'tooltip-box bg-primary-dark border-secondary-light w-max-content relative inset-x-auto top-full rounded border text-base text-white',
             {
-              'py-1 px-4': !tight,
+              'py-[6px] px-[8px]': !tight,
             }
           )}
         >
-          {typeof content === 'string' ? t(content) : content}
+          <div>{typeof content === 'string' ? t(content) : content}</div>
+          <div className="text-aqua-pale">
+            {typeof secondaryContent === 'string' ? t(secondaryContent) : secondaryContent}
+          </div>
           <svg
             className="text-primary-dark stroke-secondary-light absolute h-4"
             style={arrowPositionStyle[position]}