diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx
index c75f8f67619..ac1b7f8b7ae 100644
--- a/react-components/src/components/Architecture/FilterButton.tsx
+++ b/react-components/src/components/Architecture/FilterButton.tsx
@@ -101,40 +101,40 @@ export const FilterButton = ({
     return <></>;
   }
   return (
-    <CogsTooltip
-      content={<LabelWithShortcut label={label} command={command} />}
-      disabled={usedInSettings || label === undefined}
-      appendTo={document.body}
-      placement={placement}>
-      <Dropdown
-        visible={isOpen}
-        hideOnSelect={false}
-        appendTo={'parent'}
-        placement={usedInSettings ? 'bottom-end' : 'auto-start'}
-        content={
-          <div ref={menuRef}>
-            <Menu
-              style={{
-                minWidth: '100px',
-                overflow: 'auto',
-                flexDirection
+    <Dropdown
+      visible={isOpen}
+      hideOnSelect={false}
+      appendTo={'parent'}
+      placement={usedInSettings ? 'bottom-end' : 'auto-start'}
+      content={
+        <div ref={menuRef}>
+          <Menu
+            style={{
+              minWidth: '100px',
+              overflow: 'auto',
+              flexDirection
+            }}>
+            <Menu.Item
+              key={-1}
+              toggled={isAllChecked}
+              onClick={() => {
+                command.toggleAllChecked();
               }}>
-              <Menu.Item
-                key={-1}
-                toggled={isAllChecked}
-                onClick={() => {
-                  command.toggleAllChecked();
-                }}>
-                {BaseFilterCommand.getAllString(t)}
-              </Menu.Item>
-              <StyledMenuItems>
-                {children.map((child, _index): ReactElement => {
-                  return <FilterItem key={child.uniqueId} command={child} />;
-                })}
-              </StyledMenuItems>
-            </Menu>
-          </div>
-        }>
+              {BaseFilterCommand.getAllString(t)}
+            </Menu.Item>
+            <StyledMenuItems>
+              {children.map((child, _index): ReactElement => {
+                return <FilterItem key={child.uniqueId} command={child} />;
+              })}
+            </StyledMenuItems>
+          </Menu>
+        </div>
+      }>
+      <CogsTooltip
+        content={<LabelWithShortcut label={label} command={command} />}
+        disabled={usedInSettings || label === undefined}
+        appendTo={document.body}
+        placement={placement}>
         <Button
           type={usedInSettings ? 'tertiary' : getButtonType(command)}
           icon={usedInSettings ? (isOpen ? 'ChevronUp' : 'ChevronDown') : icon}
@@ -154,8 +154,8 @@ export const FilterButton = ({
           }}>
           {usedInSettings ? selectedLabel : undefined}
         </Button>
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };
 
diff --git a/react-components/src/components/Architecture/OptionButton.tsx b/react-components/src/components/Architecture/OptionButton.tsx
index 73e80498702..857754020a8 100644
--- a/react-components/src/components/Architecture/OptionButton.tsx
+++ b/react-components/src/components/Architecture/OptionButton.tsx
@@ -89,30 +89,30 @@ export const OptionButton = ({
   const selectedLabel = command.selectedChild?.getLabel(t);
 
   return (
-    <CogsTooltip
-      content={<LabelWithShortcut label={label} command={command} />}
-      disabled={usedInSettings || label === undefined}
-      appendTo={document.body}
-      placement={placement}>
-      <Dropdown
-        visible={isOpen}
-        hideOnSelect={true}
-        appendTo={'parent'}
-        placement={usedInSettings ? 'bottom-end' : 'auto-start'}
-        content={
-          <div ref={menuRef}>
-            <Menu
-              style={{
-                minWidth: '0px',
-                overflow: 'auto',
-                flexDirection
-              }}>
-              {children.map((child, _index): ReactElement => {
-                return createMenuItem(child, t, postAction);
-              })}
-            </Menu>
-          </div>
-        }>
+    <Dropdown
+      visible={isOpen}
+      hideOnSelect={true}
+      appendTo={'parent'}
+      placement={usedInSettings ? 'bottom-end' : 'auto-start'}
+      content={
+        <div ref={menuRef}>
+          <Menu
+            style={{
+              minWidth: '0px',
+              overflow: 'auto',
+              flexDirection
+            }}>
+            {children.map((child, _index): ReactElement => {
+              return createMenuItem(child, t, postAction);
+            })}
+          </Menu>
+        </div>
+      }>
+      <CogsTooltip
+        content={<LabelWithShortcut label={label} command={command} />}
+        disabled={usedInSettings || label === undefined}
+        appendTo={document.body}
+        placement={placement}>
         <Button
           style={{
             padding: usedInSettings ? DEFAULT_PADDING : '8px 4px',
@@ -132,8 +132,8 @@ export const OptionButton = ({
           }}>
           {selectedLabel}
         </Button>
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };
 
diff --git a/react-components/src/components/Architecture/SettingsButton.tsx b/react-components/src/components/Architecture/SettingsButton.tsx
index b9a35d13e11..a0d7316f40c 100644
--- a/react-components/src/components/Architecture/SettingsButton.tsx
+++ b/react-components/src/components/Architecture/SettingsButton.tsx
@@ -101,29 +101,29 @@ export const SettingsButton = ({
   const children = command.children;
 
   return (
-    <CogsTooltip
-      content={<LabelWithShortcut label={label} command={command} />}
-      disabled={label === undefined}
-      appendTo={document.body}
-      placement={placement}>
-      <Dropdown
-        visible={isOpen}
-        hideOnSelect={false}
-        appendTo={'parent'}
-        placement="auto-start"
-        content={
-          <div ref={menuRef}>
-            <Menu
-              style={{
-                flexDirection,
-                padding: DEFAULT_PADDING
-              }}>
-              {children.map((child, _index): ReactElement | undefined => {
-                return createMenuItem(child, t);
-              })}
-            </Menu>
-          </div>
-        }>
+    <Dropdown
+      visible={isOpen}
+      hideOnSelect={false}
+      appendTo={'parent'}
+      placement="auto-start"
+      content={
+        <div ref={menuRef}>
+          <Menu
+            style={{
+              flexDirection,
+              padding: DEFAULT_PADDING
+            }}>
+            {children.map((child, _index): ReactElement | undefined => {
+              return createMenuItem(child, t);
+            })}
+          </Menu>
+        </div>
+      }>
+      <CogsTooltip
+        content={<LabelWithShortcut label={label} command={command} />}
+        disabled={label === undefined}
+        appendTo={document.body}
+        placement={placement}>
         <Button
           type={getButtonType(command)}
           icon={icon}
@@ -138,8 +138,8 @@ export const SettingsButton = ({
             setOpen((prevState) => !prevState);
           }}
         />
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };
 
diff --git a/react-components/src/components/RevealToolbar/HelpButton.tsx b/react-components/src/components/RevealToolbar/HelpButton.tsx
index ff5b812893f..6cc1378c8a1 100644
--- a/react-components/src/components/RevealToolbar/HelpButton.tsx
+++ b/react-components/src/components/RevealToolbar/HelpButton.tsx
@@ -20,20 +20,20 @@ export const HelpButton = ({ fallbackLanguage }: HelpButtonProps): ReactElement
   const [helpActive, setHelpActive] = useState<boolean>(false);
 
   return (
-    <CogsTooltip content={t('HELP_TOOLTIP', 'Help')} placement="right" appendTo={document.body}>
-      <Dropdown
-        appendTo={document.body}
-        onClickOutside={() => {
-          setHelpActive(false);
-        }}
-        content={
-          <StyledMenu>
-            <MouseNavigation fallbackLanguage={fallbackLanguage} />
-            <KeyboardNavigation fallbackLanguage={fallbackLanguage} />
-            <TouchNavigation fallbackLanguage={fallbackLanguage} />
-          </StyledMenu>
-        }
-        placement="right">
+    <Dropdown
+      appendTo={document.body}
+      onClickOutside={() => {
+        setHelpActive(false);
+      }}
+      content={
+        <StyledMenu>
+          <MouseNavigation fallbackLanguage={fallbackLanguage} />
+          <KeyboardNavigation fallbackLanguage={fallbackLanguage} />
+          <TouchNavigation fallbackLanguage={fallbackLanguage} />
+        </StyledMenu>
+      }
+      placement="right">
+      <CogsTooltip content={t('HELP_TOOLTIP', 'Help')} placement="right" appendTo={document.body}>
         <Button
           type="ghost"
           icon="Help"
@@ -43,8 +43,8 @@ export const HelpButton = ({ fallbackLanguage }: HelpButtonProps): ReactElement
             setHelpActive((prevState) => !prevState);
           }}
         />
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };
 
diff --git a/react-components/src/components/RevealToolbar/LayersButton.tsx b/react-components/src/components/RevealToolbar/LayersButton.tsx
index 24f7577e519..52e097cf579 100644
--- a/react-components/src/components/RevealToolbar/LayersButton.tsx
+++ b/react-components/src/components/RevealToolbar/LayersButton.tsx
@@ -40,16 +40,16 @@ export const LayersButton = ({
   );
 
   return (
-    <CogsTooltip
-      content={t('LAYERS_FILTER_TOOLTIP', 'Filter 3D resource layers')}
-      placement="right"
-      appendTo={document.body}>
-      <Dropdown
-        appendTo={viewer.domElement ?? document.body}
-        content={<LayersContainer modelHandlers={modelLayerHandlers} update={update} />}
-        placement="right-start">
+    <Dropdown
+      appendTo={viewer.domElement ?? document.body}
+      content={<LayersContainer modelHandlers={modelLayerHandlers} update={update} />}
+      placement="right-start">
+      <CogsTooltip
+        content={t('LAYERS_FILTER_TOOLTIP', 'Filter 3D resource layers')}
+        placement="right"
+        appendTo={document.body}>
         <Button type="ghost" icon="Layers" aria-label="3D Resource layers" />
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
index d66060031a5..0bd67694b99 100644
--- a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
+++ b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
@@ -123,51 +123,51 @@ export const RuleBasedOutputsButton = ({
 
   return (
     <>
-      <CogsTooltip
-        content={t('RULESET_SELECT_HEADER', 'Select color overlay')}
-        placement="right"
-        appendTo={document.body}>
-        <Dropdown
-          placement="right-start"
-          disabled={isAssetMappingsLoading}
-          content={
-            <Menu
-              style={{
-                maxHeight: 300,
-                overflow: 'auto',
-                marginBottom: '20px'
-              }}>
-              <Menu.Header>{t('RULESET_SELECT_HEADER', 'Select color overlay')}</Menu.Header>
+      <Dropdown
+        placement="right-start"
+        disabled={isAssetMappingsLoading}
+        content={
+          <Menu
+            style={{
+              maxHeight: 300,
+              overflow: 'auto',
+              marginBottom: '20px'
+            }}>
+            <Menu.Header>{t('RULESET_SELECT_HEADER', 'Select color overlay')}</Menu.Header>
+            <RuleBasedSelectionItem
+              key="no-rule-selected"
+              id="no-rule-selected"
+              label={t('RULESET_NO_SELECTION', 'No RuleSet selected')}
+              checked={currentRuleSetEnabled === undefined || emptyRuleSelected?.isEnabled}
+              onChange={onChange}
+              isLoading={isRuleLoading}
+              isEmptyRuleItem={true}
+            />
+            {ruleInstances?.map((item) => (
               <RuleBasedSelectionItem
-                key="no-rule-selected"
-                id="no-rule-selected"
-                label={t('RULESET_NO_SELECTION', 'No RuleSet selected')}
-                checked={currentRuleSetEnabled === undefined || emptyRuleSelected?.isEnabled}
+                key={item?.rule?.properties.id}
+                id={item?.rule?.properties.id}
+                label={item?.rule?.properties.name}
+                checked={item?.isEnabled}
                 onChange={onChange}
                 isLoading={isRuleLoading}
-                isEmptyRuleItem={true}
+                isEmptyRuleItem={false}
               />
-              {ruleInstances?.map((item) => (
-                <RuleBasedSelectionItem
-                  key={item?.rule?.properties.id}
-                  id={item?.rule?.properties.id}
-                  label={item?.rule?.properties.name}
-                  checked={item?.isEnabled}
-                  onChange={onChange}
-                  isLoading={isRuleLoading}
-                  isEmptyRuleItem={false}
-                />
-              ))}
-            </Menu>
-          }>
+            ))}
+          </Menu>
+        }>
+        <CogsTooltip
+          content={t('RULESET_SELECT_HEADER', 'Select color overlay')}
+          placement="right"
+          appendTo={document.body}>
           <Button
             disabled={isAssetMappingsLoading}
             icon="ColorPalette"
             aria-label="Select RuleSet"
             type="ghost"
           />
-        </Dropdown>
-      </CogsTooltip>
+        </CogsTooltip>
+      </Dropdown>
       {ruleInstances !== undefined && ruleInstances?.length > 0 && (
         <RuleBasedOutputsSelector
           onRuleSetChanged={ruleSetStylingChanged}
diff --git a/react-components/src/components/RevealToolbar/SelectSceneButton.tsx b/react-components/src/components/RevealToolbar/SelectSceneButton.tsx
index 6e94e3ba8b0..27955305ed0 100644
--- a/react-components/src/components/RevealToolbar/SelectSceneButton.tsx
+++ b/react-components/src/components/RevealToolbar/SelectSceneButton.tsx
@@ -40,25 +40,25 @@ export const SelectSceneButton = ({
   }
 
   return (
-    <CogsTooltip
-      content={t('SCENE_SELECT_HEADER', 'Select 3D location')}
-      placement="right"
-      appendTo={document.body}>
-      <Dropdown
-        placement="right-start"
-        content={
-          <StyledMenu>
-            {orientation === 'none' && (
-              <Menu.Header>{t('SCENE_SELECT_HEADER', 'Select 3D location')}</Menu.Header>
-            )}
-            <SceneList selectedScene={selectedScene} onSceneChange={setSceneAndUpdateName} />
-          </StyledMenu>
-        }>
+    <Dropdown
+      placement="right-start"
+      content={
+        <StyledMenu>
+          {orientation === 'none' && (
+            <Menu.Header>{t('SCENE_SELECT_HEADER', 'Select 3D location')}</Menu.Header>
+          )}
+          <SceneList selectedScene={selectedScene} onSceneChange={setSceneAndUpdateName} />
+        </StyledMenu>
+      }>
+      <CogsTooltip
+        content={t('SCENE_SELECT_HEADER', 'Select 3D location')}
+        placement="right"
+        appendTo={document.body}>
         <Button icon="World" aria-label="Select 3D location" type="ghost">
           {orientation === 'horizontal' && sceneName}
         </Button>
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };
 
diff --git a/react-components/src/components/RevealToolbar/SetFlexibleControlsType.tsx b/react-components/src/components/RevealToolbar/SetFlexibleControlsType.tsx
index eff98682371..1cf86fcf262 100644
--- a/react-components/src/components/RevealToolbar/SetFlexibleControlsType.tsx
+++ b/react-components/src/components/RevealToolbar/SetFlexibleControlsType.tsx
@@ -126,7 +126,8 @@ const ButtonsControlTypeSelector = ({
             aria-label={getLabel(translateDelegate, controlType)}
             onClick={() => {
               setSelectedControlsType(controlType);
-            }}></Button>
+            }}
+          />
         </CogsTooltip>
       ))}
     </ButtonsContainer>
diff --git a/react-components/src/components/RevealToolbar/SettingsButton.tsx b/react-components/src/components/RevealToolbar/SettingsButton.tsx
index d0b5eb05859..62742b380f3 100644
--- a/react-components/src/components/RevealToolbar/SettingsButton.tsx
+++ b/react-components/src/components/RevealToolbar/SettingsButton.tsx
@@ -23,25 +23,25 @@ export const SettingsButton = ({
   const [settingsActive, setSettingsActive] = useState<boolean>(false);
 
   return (
-    <CogsTooltip
-      content={t('SETTINGS_TOOLTIP', 'Settings')}
-      placement="right"
-      appendTo={document.body}>
-      <Dropdown
-        appendTo={document.body}
-        onClickOutside={() => {
-          setSettingsActive(false);
-        }}
-        content={
-          <Menu>
-            <HighFidelityContainer
-              lowQualitySettings={lowQualitySettings}
-              highQualitySettings={highQualitySettings}
-            />
-            {customSettingsContent ?? <></>}
-          </Menu>
-        }
-        placement="right-start">
+    <Dropdown
+      appendTo={document.body}
+      onClickOutside={() => {
+        setSettingsActive(false);
+      }}
+      content={
+        <Menu>
+          <HighFidelityContainer
+            lowQualitySettings={lowQualitySettings}
+            highQualitySettings={highQualitySettings}
+          />
+          {customSettingsContent ?? <></>}
+        </Menu>
+      }
+      placement="right-start">
+      <CogsTooltip
+        content={t('SETTINGS_TOOLTIP', 'Settings')}
+        placement="right"
+        appendTo={document.body}>
         <Button
           icon="Settings"
           type="ghost"
@@ -51,7 +51,7 @@ export const SettingsButton = ({
             setSettingsActive((prevState) => !prevState);
           }}
         />
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/SlicerButton.tsx b/react-components/src/components/RevealToolbar/SlicerButton.tsx
index 5f7176989c1..dcd8cc732a9 100644
--- a/react-components/src/components/RevealToolbar/SlicerButton.tsx
+++ b/react-components/src/components/RevealToolbar/SlicerButton.tsx
@@ -92,26 +92,26 @@ export const SlicerButton = (): ReactElement => {
   }
 
   return (
-    <CogsTooltip content={t('SLICE_TOOLTIP', 'Slice')} placement="right" appendTo={document.body}>
-      <Dropdown
-        appendTo={() => document.body}
-        onClickOutside={() => {
-          setSliceActive(false);
-        }}
-        content={
-          <StyledMenu>
-            <RangeSlider
-              min={0}
-              max={1}
-              step={0.01}
-              setValue={changeSlicingState}
-              marks={{}}
-              value={[bottomRatio, topRatio]}
-              vertical
-            />
-          </StyledMenu>
-        }
-        placement="right-end">
+    <Dropdown
+      appendTo={() => document.body}
+      onClickOutside={() => {
+        setSliceActive(false);
+      }}
+      content={
+        <StyledMenu>
+          <RangeSlider
+            min={0}
+            max={1}
+            step={0.01}
+            setValue={changeSlicingState}
+            marks={{}}
+            value={[bottomRatio, topRatio]}
+            vertical
+          />
+        </StyledMenu>
+      }
+      placement="right-end">
+      <CogsTooltip content={t('SLICE_TOOLTIP', 'Slice')} placement="right" appendTo={document.body}>
         <Button
           type="ghost"
           icon="Slice"
@@ -121,8 +121,8 @@ export const SlicerButton = (): ReactElement => {
             setSliceActive((prevState) => !prevState);
           }}
         />
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };