Use separate for more tooltips

packages/frontend-2/components/viewer/controls/Bottom.vue

@@ -77,14 +77,16 @@ const panels = shallowRef({
     id: ActivePanel.measurements,
     name: 'Measure',
     icon: 'IconViewerMeasurements',
-    tooltip: getShortcutDisplayText(shortcuts.ToggleMeasurements),
+    tooltip: getShortcutDisplayText(shortcuts.ToggleMeasurements, {
+      format: 'separate'
+    }),
     extraClasses: 'hidden md:flex'
   },
   [ActivePanel.sectionBox]: {
     id: ActivePanel.sectionBox,
     name: 'Section',
     icon: 'IconViewerSectionBox',
-    tooltip: getShortcutDisplayText(shortcuts.ToggleSectionBox),
+    tooltip: getShortcutDisplayText(shortcuts.ToggleSectionBox, { format: 'separate' }),
     extraClasses: ''
   },
   [ActivePanel.explode]: {

packages/frontend-2/components/viewer/controls/Right.vue

@@ -10,9 +10,14 @@
     <ViewerControlsButtonGroup ref="buttonContainer" direction="vertical">
       <ViewerControlsButtonToggle
         v-tippy="
-          getTooltipProps(getShortcutDisplayText(shortcuts.ZoomExtentsOrSelection), {
-            placement: 'left'
-          })
+          getTooltipProps(
+            getShortcutDisplayText(shortcuts.ZoomExtentsOrSelection, {
+              format: 'separate'
+            }),
+            {
+              placement: 'left'
+            }
+          )
         "
         icon="IconViewerZoom"
         @click="trackAndzoomExtentsOrSelection()"