diff --git a/CHANGES.rst b/CHANGES.rst
index eb9291783f..f29a341bdd 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -4,7 +4,7 @@
 New Features
 ------------
 
-* New design for viewer legend and data-menu. [#3220, #3254, #3263, #3264, #3271, #3272]
+* New design for viewer legend and data-menu. [#3220, #3254, #3263, #3264, #3271, #3272, #3274]
 
 Cubeviz
 ^^^^^^^
diff --git a/jdaviz/app.py b/jdaviz/app.py
index 4f82b93b69..4e5776f4b9 100644
--- a/jdaviz/app.py
+++ b/jdaviz/app.py
@@ -156,7 +156,8 @@ def to_unit(self, data, cid, values, original_units, target_units):
                      'glue-state-sync-wrapper': 'components/glue_state_sync_wrapper.vue',
                      'data-menu-add': 'components/data_menu_add.vue',
                      'data-menu-remove': 'components/data_menu_remove.vue',
-                     'data-menu-subset-edit': 'components/data_menu_subset_edit.vue'}
+                     'data-menu-subset-edit': 'components/data_menu_subset_edit.vue',
+                     'hover-api-hint': 'components/hover_api_hint.vue'}
 
 _verbosity_levels = ('debug', 'info', 'warning', 'error')
 
@@ -186,6 +187,8 @@ class ApplicationState(State):
         True, docstring="State of the plugins drawer.")
     show_toolbar_buttons = CallbackProperty(
         True, docstring="Whether to show app-level toolbar buttons (left of sidebar menu button).")
+    show_api_hints = CallbackProperty(
+        False, docstring="Whether to show API hints.")
     logger_overlay = CallbackProperty(
         False, docstring="State of the logger history overlay.")
 
diff --git a/jdaviz/app.vue b/jdaviz/app.vue
index 5f67b89839..0d465badcc 100644
--- a/jdaviz/app.vue
+++ b/jdaviz/app.vue
@@ -55,6 +55,11 @@
             <v-icon medium>mdi-help-box</v-icon>
           </v-btn>
         </j-tooltip>
+        <j-tooltip v-if="state.show_toolbar_buttons && checkNotebookContext()" tipid="app-api-hints">
+          <v-btn icon @click="state.show_api_hints = !state.show_api_hints" :class="{active : state.show_api_hints}">
+            <v-icon medium style="padding-top: 2px">mdi-code-tags</v-icon>
+          </v-btn>
+        </j-tooltip>
         <j-tooltip v-if="state.show_toolbar_buttons" tipid="app-snackbar-history">
           <v-btn icon @click="state.logger_overlay = !state.logger_overlay" :class="{active : state.logger_overlay}">
             <v-icon medium style="padding-top: 2px">mdi-message-reply-text</v-icon>
diff --git a/jdaviz/components/data_menu_add.vue b/jdaviz/components/data_menu_add.vue
index 7e5af8b157..2d41844281 100644
--- a/jdaviz/components/data_menu_add.vue
+++ b/jdaviz/components/data_menu_add.vue
@@ -20,7 +20,7 @@
         </v-btn>
       </j-tooltip>
     </template>
-    <v-list dense style="width: 200px; max-height: 300px; overflow-y: auto;">
+    <v-list dense style="width: 300px; max-height: 300px; overflow-y: auto;">
       <v-subheader v-if="dataset_items.length > 0"><span>Load Data</span></v-subheader>
       <v-list-item
         v-for="data in dataset_items"
@@ -29,9 +29,14 @@
           <j-tooltip tooltipcontent="add data to viewer">
             <span
               style="cursor: pointer; width: 100%"
+              :class="api_hints_enabled ? 'api-hint' : ''"
               @click="() => {$emit('add-data', data.label)}"
             >
-              {{ data.label }}
+              {{ api_hints_enabled ?
+                'dm.add_data(\''+data.label+'\')'
+                :
+                data.label
+              }} 
             </span>
           </j-tooltip>
         </v-list-item-content>
@@ -44,10 +49,12 @@
           <j-tooltip
             v-for="tool in subset_tools"
             span_style="display: inline-block"
-            :tooltipcontent="'Create new '+tool.name+' subset'"
+            :tooltipcontent="api_hints_enabled ? '' : 'Create new '+tool.name+' subset'"
           >
             <v-btn 
               icon
+              @mouseover="() => {hover_api_hint = 'dm.create_subset(\''+tool.name+'\')'}"
+              @mouseleave="() => {if (!lock_hover_api_hint) {hover_api_hint = ''}}"
               @click="() => {$emit('create-subset', tool.name)}"
             >
               <img :src="tool.img" width="20" class="invert-if-dark"/>
@@ -55,6 +62,11 @@
           </j-tooltip>
         </v-list-item-content>
       </v-list-item>
+      <hover-api-hint
+        v-if="api_hints_enabled"
+        :hover_api_hint.sync="hover_api_hint"
+        :lock_hover_api_hint.sync="lock_hover_api_hint"
+      />
     </v-list>
   </v-menu>
 
@@ -62,6 +74,12 @@
 
 <script>
 module.exports = {
-  props: ['dataset_items', 'subset_tools', 'loaded_n_data'],
+  data: function () {
+      return {
+        hover_api_hint: '',
+        lock_hover_api_hint: false,
+      }
+    },
+  props: ['dataset_items', 'subset_tools', 'loaded_n_data', 'api_hints_enabled'],
 };
 </script>
\ No newline at end of file
diff --git a/jdaviz/components/data_menu_remove.vue b/jdaviz/components/data_menu_remove.vue
index 8a8e4d24b6..2690a1e2ee 100644
--- a/jdaviz/components/data_menu_remove.vue
+++ b/jdaviz/components/data_menu_remove.vue
@@ -27,9 +27,14 @@
           >
             <span
               style="cursor: pointer; width: 100%"
+              :class="api_hints_enabled ? 'api-hint' : ''"
               @click="() => {$emit('remove-from-viewer')}"
             >
-              Remove from viewer
+              {{ api_hints_enabled ?
+                'dm.remove_from_viewer()'
+                :
+                'Remove from viewer'
+              }}
             </span>
           </j-tooltip>
         </v-list-item-content>
@@ -42,10 +47,15 @@
           >
             <span
               :style="'width: 100%; ' + (delete_app_enabled ? 'cursor: pointer;' : '')"
+              :class="api_hints_enabled ? 'api-hint' : ''"
               :disabled="!delete_app_enabled"
               @click="() => {if (delete_app_enabled) {$emit('remove-from-app')}}"
             >
-              Remove from app
+            {{ api_hints_enabled ?
+                'dm.remove_from_app()'
+                :
+                'Remove from app'
+              }}
             </span>
           </j-tooltip>
         </v-list-item-content>
@@ -56,6 +66,6 @@
 
 <script>
 module.exports = {
-  props: ['delete_enabled', 'delete_tooltip', 'delete_viewer_tooltip', 'delete_app_enabled', 'delete_app_tooltip'],
+  props: ['delete_enabled', 'delete_tooltip', 'delete_viewer_tooltip', 'delete_app_enabled', 'delete_app_tooltip', 'api_hints_enabled'],
 };
 </script>
\ No newline at end of file
diff --git a/jdaviz/components/data_menu_subset_edit.vue b/jdaviz/components/data_menu_subset_edit.vue
index f93d05aa25..58e6cd5ed2 100644
--- a/jdaviz/components/data_menu_subset_edit.vue
+++ b/jdaviz/components/data_menu_subset_edit.vue
@@ -58,12 +58,14 @@
           <j-tooltip
               v-for="tool in subset_tools.slice().reverse()"
               :span_style="'display: inline-block; float: right;'"
-              :tooltipcontent="'Interactively apply \'' + mode_item.glue_name + '\' logic to ' + subset_selected + ' using the ' + tool.name + ' tool'"
+              :tooltipcontent="api_hints_enabled ? '' : 'Interactively apply \'' + mode_item.glue_name + '\' logic to ' + subset_selected + ' using the ' + tool.name + ' tool'"
             >
               <v-btn
                 icon
                 max-height="24px"
                 max-width="24px"
+                @mouseover="() => {hover_api_hint = 'dm.modify_subset(\''+mode_item.glue_name+'\', \''+tool.name+'\')'}"
+                @mouseleave="() => {if (!lock_hover_api_hint) {hover_api_hint = ''}}"
                 @click="() => {$emit('modify-subset', mode_item.glue_name, tool.name)}"
               >
                 <img :src="tool.img" class="invert-if-dark" width="20"/>
@@ -71,7 +73,11 @@
             </j-tooltip>
         </v-list-item-action>
       </v-list-item>
-
+      <hover-api-hint
+        v-if="api_hints_enabled"
+        :hover_api_hint.sync="hover_api_hint"
+        :lock_hover_api_hint.sync="lock_hover_api_hint"
+      />
     </v-list>
   </v-menu>
 </template>
@@ -81,9 +87,11 @@ module.exports = {
   data: function () {
       return {
         hover_mode: '',
+        hover_api_hint: '',
+        lock_hover_api_hint: false,
       }
     },
-  props: ['subset_selected', 'subset_edit_enabled', 'subset_edit_tooltip', 'selected_n_subsets', 'subset_edit_modes', 'subset_tools'],
+  props: ['subset_selected', 'subset_edit_enabled', 'subset_edit_tooltip', 'selected_n_subsets', 'subset_edit_modes', 'subset_tools', 'api_hints_enabled'],
 };
 </script>
 
diff --git a/jdaviz/components/hover_api_hint.vue b/jdaviz/components/hover_api_hint.vue
new file mode 100644
index 0000000000..59fba111d8
--- /dev/null
+++ b/jdaviz/components/hover_api_hint.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-list-item
+  >
+    <v-list-item-content>
+        <span class="api-hint">
+        {{ hover_api_hint }}
+        </span>
+    </v-list-item-content>
+    <v-list-item-action>
+      <j-tooltip
+        tooltipcontent="toggle whether API hints persist after hovering to allow for copying text"
+      >
+        <v-badge
+          overlap
+          bottom
+          color="#007BA1"
+          :icon="lock_hover_api_hint ? 'mdi-lock-outline' : 'mdi-lock-open-outline'"
+        >
+          <v-btn
+            icon
+            small
+            @click="(e) => {e.stopPropagation(); $emit('update:lock_hover_api_hint', !lock_hover_api_hint); $emit('update:hover_api_hint', '')}"
+          >
+            <v-icon
+              :color="lock_hover_api_hint ? '#007BA1' : null"
+            >
+              mdi-code-tags
+            </v-icon>
+          </v-btn>
+        </v-badge>
+      </j-tooltip>
+    </v-list-item-action>
+  </v-list-item>
+</template>
+
+<script>
+  module.exports = {
+    props: ['hover_api_hint', 'lock_hover_api_hint'],
+  };
+</script>
\ No newline at end of file
diff --git a/jdaviz/components/plugin_switch.vue b/jdaviz/components/plugin_switch.vue
index bd2d180509..a23ed9fb7e 100644
--- a/jdaviz/components/plugin_switch.vue
+++ b/jdaviz/components/plugin_switch.vue
@@ -1,6 +1,11 @@
 <template>
   <span v-if="use_eye_icon">
-    <v-btn icon @click.stop="$emit('update:value', !value); $emit('click', !value)">
+    <v-btn
+      icon 
+      @mouseover="$emit('mouseover')"
+      @mouseleave="$emit('mouseleave')"
+      @click.stop="$emit('update:value', !value); $emit('click', !value)"
+    >
       <v-icon>mdi-eye{{ value ? '' : '-off' }}</v-icon>
     </v-btn>
     <span v-if="api_hints_enabled && api_hint" class="api-hint">
diff --git a/jdaviz/components/tooltip.vue b/jdaviz/components/tooltip.vue
index 9eceec6056..9c5ff0ee93 100644
--- a/jdaviz/components/tooltip.vue
+++ b/jdaviz/components/tooltip.vue
@@ -24,6 +24,7 @@ const tooltips = {
   // app toolbar
   'app-help': 'Open docs in new tab',
   'app-snackbar-history': 'Toggle logger overlay',
+  'app-api-hints': 'Toggle API hints',
   'app-toolbar-plugins': 'Toggle plugin sidebar',
   'app-toolbar-popout': `Display in a new window<br /><br />
     <div style="width: 200px; border: 1px solid gray;" class="pa-2">
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index 68e2b4094f..fe553e3bfe 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -3,23 +3,10 @@
     class="tray-plugin"
     style="padding-left: 24px; padding-right: 24px; padding-top: 12px" >
     <v-row>
-      <div style="width: calc(100% - 64px)">
+      <div style="width: calc(100% - 32px)">
         <j-docs-link :link="link">{{ description }}</j-docs-link>
       </div>
-      <div style="width: 32px">
-        <j-tooltip tipid='plugin-api-hints'>
-          <v-btn
-            v-if="api_hints_enabled !== undefined && config && plugin_key && checkNotebookContext()" 
-            id="api-hints-button"
-            icon 
-            :class="api_hints_enabled ? 'api-hint' : null"
-            @click="() => {$emit('update:api_hints_enabled', !api_hints_enabled)}"
-          >
-            <v-icon>mdi-code-tags</v-icon>
-          </v-btn>
-        </j-tooltip>
 
-      </div>
       <div style="width: 32px">
         <j-plugin-popout :popout_button="popout_button"></j-plugin-popout>
       </div>
diff --git a/jdaviz/configs/default/plugins/data_menu/data_menu.py b/jdaviz/configs/default/plugins/data_menu/data_menu.py
index 2b062e4a2b..cfdd8591e6 100644
--- a/jdaviz/configs/default/plugins/data_menu/data_menu.py
+++ b/jdaviz/configs/default/plugins/data_menu/data_menu.py
@@ -42,6 +42,7 @@ class DataMenu(TemplateMixin, LayerSelectMixin, DatasetSelectMixin):
     Only the following attributes and methods are available through the
     :ref:`public API <plugin-apis>`:
 
+    * :meth:`open_menu`
     * ``layer`` (:class:`~jdaviz.core.template_mixin.LayerSelect`):
         actively selected layer(s)
     * ``orientation`` (:class:`~jdaviz.core.template_mixin.LayerSelect`):
@@ -57,6 +58,8 @@ class DataMenu(TemplateMixin, LayerSelectMixin, DatasetSelectMixin):
     """
     template_file = __file__, "data_menu.vue"
 
+    force_open_menu = Bool(False).tag(sync=True)
+
     viewer_id = Unicode().tag(sync=True)
     viewer_reference = Unicode().tag(sync=True)
 
@@ -146,13 +149,19 @@ def data_not_in_viewer(data):
 
     @property
     def user_api(self):
-        expose = ['layer', 'set_layer_visibility', 'toggle_layer_visibility',
+        expose = ['open_menu', 'layer', 'set_layer_visibility', 'toggle_layer_visibility',
                   'create_subset', 'modify_subset', 'add_data', 'view_info',
                   'remove_from_viewer', 'remove_from_app']
         if self.app.config == 'imviz':
             expose += ['orientation']
         return UserApiWrapper(self, expose=expose)
 
+    def open_menu(self):
+        """
+        Open all instances of the data menu.
+        """
+        self.force_open_menu = True
+
     @property
     def existing_subset_labels(self):
         return [sg.label for sg in self.app.data_collection.subset_groups]
diff --git a/jdaviz/configs/default/plugins/data_menu/data_menu.vue b/jdaviz/configs/default/plugins/data_menu/data_menu.vue
index 24f4aa8c61..0e8880592d 100644
--- a/jdaviz/configs/default/plugins/data_menu/data_menu.vue
+++ b/jdaviz/configs/default/plugins/data_menu/data_menu.vue
@@ -10,7 +10,7 @@
           :close-on-content-click="false"
           v-model="data_menu_open">
           <template v-slot:activator="{ on, attrs }">
-            <div :id="'layer-legend-'+ viewer_id">
+            <div :id="'layer-legend-'+ viewer_id" class="layer-legend">
               <div 
                 v-if="Object.keys(viewer_icons).length > 1 || Object.keys(visible_layers).length == 0 || data_menu_open"
                 :class="loaded_n_data === 0 && !data_menu_open ? 'viewer-label pulse' : 'viewer-label'"
@@ -61,6 +61,13 @@
             </div>
           </template>
           <v-list :id="'dm-content-' + viewer_id" style="width: 400px" class="overflow-y-auto">
+            <v-list-item v-if="api_hints_enabled" style="min-height: 12px"> 
+              <v-list-item-content> 
+                <span class="api-hint"> 
+                  <b>dm = {{ config }}.viewers['{{viewer_id}}'].data_menu</b>
+                </span> 
+              </v-list-item-content> 
+            </v-list-item> 
             <v-list-item class="dm-header">
               <v-list-item-icon>
                 <j-tooltip
@@ -96,7 +103,8 @@
                   dense
                   :items="orientation_layer_items"
                   v-model="orientation_layer_selected"
-                  label="Orientation"
+                  :label="api_hints_enabled ? 'dm.orientation = ' : 'Orientation'" 
+                  :class="api_hints_enabled ? 'api-hint api-hint-invert-color' : ''" 
                   item-text="label"
                   item-value="label"
                   :hide-details="true"
@@ -128,12 +136,20 @@
                   :dataset_items="dataset_items"
                   :subset_tools="subset_tools"
                   :loaded_n_data="loaded_n_data"
+                  :api_hints_enabled="api_hints_enabled"
                   @add-data="(data_label) => {add_data_to_viewer({data_label: data_label})}"
                   @create-subset="(subset_type) => {create_subset({subset_type: subset_type}); data_menu_open = false}"
                 >
                 </data-menu-add>
               </v-list-item-action>
             </v-list-item>
+            <v-list-item 
+              v-if="api_hints_enabled" 
+            > 
+              <v-list-item-content> 
+                <span class="api-hint">dm.layer = {{ layer_selected }}</span> 
+              </v-list-item-content> 
+            </v-list-item> 
             <v-list-item-group
               v-model="dm_layer_selected"
               active-class="active-list-item"
@@ -142,7 +158,10 @@
               dense
             >
               <div>
-              <v-list-item v-for="item in layer_items.slice().reverse()">
+              <v-list-item 
+                v-for="item in layer_items.slice().reverse()" 
+                class="layer-select" 
+              > 
                 <v-list-item-icon>
                   <j-layer-viewer-icon-stylized
                       :label="item.label"
@@ -165,11 +184,14 @@
                   </span>
                 </v-list-item-content>
                 <v-list-item-action>
-                  <j-tooltip tooltipcontent="Toggle visibility">
+                  <j-tooltip 
+                    :tooltipcontent="api_hints_enabled ? '' : 'Toggle visibility'" 
+                  > 
                     <plugin-switch
                       :value="item.visible"
                       @click="(value) => {set_layer_visibility({layer: item.label, value: value})}"
-                      :api_hint='"dm.set_layer_visibility("+viewer_id+", "'
+                      @mouseover = "() => {hover_api_hint = 'dm.set_layer_visibility(\'' + item.label + '\', '+boolToString(item.visible)+')'}" 
+                      @mouseleave = "() => {if (!lock_hover_api_hint) {hover_api_hint = ''}}"
                       :api_hints_enabled="false"
                       :use_eye_icon="true"
                     />
@@ -178,6 +200,11 @@
               </v-list-item>
               </div>
             </v-list-item-group>
+            <hover-api-hint 
+              v-if="api_hints_enabled" 
+              :hover_api_hint.sync="hover_api_hint" 
+              :lock_hover_api_hint.sync="lock_hover_api_hint" 
+            /> 
             <v-list-item class="dm-footer" v-if="loaded_n_data > 0">
               <v-list-item-content style="display: inline-block">
                 <data-menu-remove
@@ -186,6 +213,7 @@
                   :delete_viewer_tooltip="delete_viewer_tooltip"
                   :delete_app_enabled="delete_app_enabled"
                   :delete_app_tooltip="delete_app_tooltip"
+                  :api_hints_enabled="api_hints_enabled" 
                   @remove-from-viewer="remove_from_viewer"
                   @remove-from-app="remove_from_app"
                 />
@@ -208,6 +236,7 @@
                   :subset_edit_modes="subset_edit_modes"
                   :subset_tools="subset_tools"
                   :subset_selected="layer_selected[0]"
+                  :api_hints_enabled="api_hints_enabled" 
                   @view-info="view_info"
                   @modify-subset="(combination_mode, tool) => {modify_subset({combination_mode: combination_mode,
                                                                               subset_type: tool});
@@ -247,6 +276,8 @@
     data: function () {
       return {
         data_menu_open: false,
+        hover_api_hint: '',
+        lock_hover_api_hint: false
       }
     },
     mounted() {
@@ -273,6 +304,14 @@
         element = element.parentElement;
       }
     },
+    watch: {
+      force_open_menu: function (val) {
+        if (val) {
+          this.data_menu_open = true;
+          this.force_open_menu = false;
+        }
+      }
+    },
     methods: {
       onScroll(e) {
         const dataMenuHeight = document.getElementById(`layer-legend-${this.viewer_id}`).parentElement.getBoundingClientRect().height
@@ -281,6 +320,13 @@
           const menuContent = document.getElementById(`dm-content-${this.viewer_id}`);
           menuContent.parentElement.style.top = top + "px";
         }
+      },
+      boolToString(b) {
+        if (b) {
+          return 'True'
+        } else {
+          return 'False'
+        }
       }
     },
   }
@@ -325,7 +371,7 @@
   .v-list-item__icon {
     margin-top: 6px !important;
   }
-  .v-list-item:nth-child(even) {
+  .layer-select:nth-child(even) {
     /* alternating row colors */
     background-color: #f1f2f85a;
   }
@@ -334,7 +380,7 @@
     font-weight: 500;
   }
   .dm-header, .dm-footer {
-    background-color: #003B4D;
+    background-color: #003B4D !important;
     font-weight: bold;
   }
   .dm-header > .v-list-item__icon, .dm-header > .v-list-item__content, .dm-header > .v-list-item__action,
diff --git a/jdaviz/configs/imviz/plugins/orientation/orientation.vue b/jdaviz/configs/imviz/plugins/orientation/orientation.vue
index fc1345590a..786cc80979 100644
--- a/jdaviz/configs/imviz/plugins/orientation/orientation.vue
+++ b/jdaviz/configs/imviz/plugins/orientation/orientation.vue
@@ -120,7 +120,7 @@
             :icons="icons"
             :show_if_single_entry="true"
             label="Orientation in viewer"
-            api_hint="plg.orientation_layer ="
+            api_hint="plg.orientation ="
             :api_hints_enabled="api_hints_enabled"
             hint="Select the viewer orientation"
           />
diff --git a/jdaviz/core/template_mixin.py b/jdaviz/core/template_mixin.py
index be5a328a22..c778f8b0ce 100644
--- a/jdaviz/core/template_mixin.py
+++ b/jdaviz/core/template_mixin.py
@@ -201,6 +201,7 @@ def _clear_cache(self, *attrs):
 class TemplateMixin(VuetifyTemplate, HubListener, ViewerPropertiesMixin, WithCache):
     config = Unicode("").tag(sync=True)
     vdocs = Unicode("").tag(sync=True)
+    api_hints_enabled = Bool(False).tag(sync=True)
     popout_button = Any().tag(sync=True, **widget_serialization)
 
     def __new__(cls, *args, **kwargs):
@@ -235,6 +236,9 @@ def __init__(self, *args, **kwargs):
         self.hub.subscribe(self, ViewerRemovedMessage,
                            handler=lambda msg: self._remove_viewer_callbacks(msg.viewer_id))
 
+        self.app.state.add_callback('show_api_hints', self._update_api_hints_enabled)
+        self._update_api_hints_enabled()
+
     @property
     def app(self):
         """
@@ -287,6 +291,9 @@ def _remove_viewer_callbacks(self, viewer_id):
         self._viewer_callbacks = {k: v for k, v in self._viewer_callbacks.items()
                                   if k.split(':')[0] != viewer_id}
 
+    def _update_api_hints_enabled(self, *args):
+        self.api_hints_enabled = self.app.state.show_api_hints
+
 
 def skip_if_no_updates_since_last_active(skip_if_not_active=True):
     def decorator(meth):
@@ -403,7 +410,6 @@ class PluginTemplateMixin(TemplateMixin):
     is_active = Bool(False).tag(sync=True)  # noqa read-only: whether the previews should be shown according to plugin_opened and keep_active
     scroll_to = Bool(False).tag(sync=True)  # noqa once set to True, vue will scroll to the element and reset to False
     spinner = Bool(False).tag(sync=True)  # noqa use along-side @with_spinner() and <plugin-add-results :action_spinner="spinner">
-    api_hints_enabled = Bool(False).tag(sync=True)
     previews_temp_disabled = Bool(False).tag(sync=True)  # noqa use along-side @with_temp_disable() and <plugin-previews-temp-disabled :previews_temp_disabled.sync="previews_temp_disabled" :previews_last_time="previews_last_time" :show_live_preview.sync="show_live_preview"/>
     previews_last_time = Float(0).tag(sync=True)
     supports_auto_update = Bool(False).tag(sync=True)  # noqa whether this plugin supports auto-updating plugin results (requires __call__ method)
diff --git a/jdaviz/core/user_api.py b/jdaviz/core/user_api.py
index bb00911739..61524fab34 100644
--- a/jdaviz/core/user_api.py
+++ b/jdaviz/core/user_api.py
@@ -129,7 +129,7 @@ class PluginUserApi(UserApiWrapper):
     """
     def __init__(self, plugin, expose=[], readonly=[], excl_from_dict=[]):
         expose = list(set(list(expose) + ['open_in_tray', 'close_in_tray',
-                                          'show', 'api_hints_enabled']))
+                                          'show']))
         if plugin.uses_active_status:
             expose += ['keep_active', 'as_active']
         self._deprecation_msg = None
diff --git a/jdaviz/main_styles.vue b/jdaviz/main_styles.vue
index 3aa60462d4..3624de3df6 100644
--- a/jdaviz/main_styles.vue
+++ b/jdaviz/main_styles.vue
@@ -268,7 +268,7 @@ a:active {
 }
 
 span.api-hint, span.api-hint-header {
-  color: #c75109 !important;
+  color: #007BA1 !important;
   font-family: monospace;
   font-size: 12px;  
 }
@@ -278,10 +278,11 @@ span.api-hint-header {
 }
 
 .api-hint :is(.v-select__slot, .v-text-field__slot, .v-input__slot, .v-input--radio-group__input) > .v-label {
-    color: #c75109 !important;
+    color: #007BA1 !important;
     font-family: monospace;
     font-size: 10px !important;
     overflow-wrap: break-word;
+
 }
 
 .api-hint :is(.v-select__slot, .v-text-field__slot) > .v-label {
@@ -290,17 +291,21 @@ span.api-hint-header {
 
 
 .api-hint .v-alert__content, .api-hint.slider-label {
-  color: #c75109 !important;
+  color: #007BA1 !important;
   font-family: monospace;
   font-size: 10px !important;
 }
 
 .api-hint.v-btn {
-  color: #c75109 !important;
+  color: #007BA1 !important;
   font-family: monospace !important;
   font-size: 12px !important;
   overflow-wrap: break-word;
   text-transform: none !important;
 }
 
+.api-hint-invert-color :is(.v-select__slot, .v-text-field__slot, .v-input__slot, .v-input--radio-group__input) > .v-label {
+  filter: invert(1) !important;
+}
+
 </style>