diff --git a/src/components/fields/ColorPicker.js b/src/components/fields/ColorPicker.js
index a1a883588..f14303b83 100644
--- a/src/components/fields/ColorPicker.js
+++ b/src/components/fields/ColorPicker.js
@@ -4,8 +4,34 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectToContainer} from 'lib';
 
-class UnconnectedColorPicker extends Component {
+export class UnconnectedColorPicker extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      empty: !this.props.fullValue && this.props.handleEmpty,
+    };
+  }
+
   render() {
+    if (this.state.empty) {
+      return (
+        <Field {...this.props}>
+          <div className="js-test-info">
+            This color is computed from other parts of the figure but you can{' '}
+            <a
+              onClick={() => {
+                this.setState({empty: false});
+                this.props.updatePlot(this.props.defaultColor);
+              }}
+            >
+              override it
+            </a>
+            .
+          </div>
+        </Field>
+      );
+    }
+
     return (
       <Field {...this.props}>
         <ColorPickerWidget
@@ -20,6 +46,8 @@ class UnconnectedColorPicker extends Component {
 UnconnectedColorPicker.propTypes = {
   fullValue: PropTypes.any,
   updatePlot: PropTypes.func,
+  handleEmpty: PropTypes.bool,
+  defaultColor: PropTypes.string,
   ...Field.propTypes,
 };
 
diff --git a/src/components/fields/MultiColorPicker.js b/src/components/fields/MultiColorPicker.js
index c0329b807..d5d6657fd 100644
--- a/src/components/fields/MultiColorPicker.js
+++ b/src/components/fields/MultiColorPicker.js
@@ -32,6 +32,7 @@ class UnconnectedMultiColorPicker extends Component {
     this.state = {
       selectedConstantColorOption:
         context.traceIndexes.length > 1 &&
+        props.fullValue &&
         props.fullValue.every(v => v[1] === props.fullValue[0][1])
           ? 'single'
           : 'multiple',
@@ -41,7 +42,11 @@ class UnconnectedMultiColorPicker extends Component {
   }
 
   setColor(color) {
-    this.props.updatePlot(color);
+    if (this.props.setColor) {
+      this.props.setColor(color);
+    } else {
+      this.props.updatePlot(color);
+    }
   }
 
   setColors(colorscale, colorscaleType) {
@@ -88,11 +93,7 @@ class UnconnectedMultiColorPicker extends Component {
         <Field {...this.props} suppressMultiValuedMessage>
           <RadioBlocks
             options={constantOptions}
-            activeOption={
-              this.props.parentSelectedConstantColorOption
-                ? this.props.parentSelectedConstantColorOption
-                : this.state.selectedConstantColorOption
-            }
+            activeOption={selectedConstantColorOption}
             onOptionChange={
               this.props.onConstantColorOptionChange
                 ? this.props.onConstantColorOptionChange
@@ -101,10 +102,7 @@ class UnconnectedMultiColorPicker extends Component {
           />
           <Info>{selectedConstantColorOption === 'single' ? singleMessage : multiMessage}</Info>
           {selectedConstantColorOption === 'single' ? (
-            <ColorPicker
-              attr={this.props.attr}
-              updatePlot={this.props.setColor ? this.props.setColor : this.setColor}
-            />
+            <ColorPicker attr={this.props.attr} updatePlot={this.setColor} />
           ) : (
             <CustomColorscalePicker
               suppressMultiValuedMessage
@@ -119,11 +117,7 @@ class UnconnectedMultiColorPicker extends Component {
     }
 
     return (
-      <ColorPicker
-        attr={this.props.attr}
-        updatePlot={this.props.setColor ? this.props.setColor : this.setColor}
-        label={this.props.label}
-      />
+      <ColorPicker attr={this.props.attr} updatePlot={this.setColor} label={this.props.label} />
     );
   }
 }
diff --git a/src/components/fields/VisibilitySelect.js b/src/components/fields/VisibilitySelect.js
index 12513928a..bcf159ea8 100644
--- a/src/components/fields/VisibilitySelect.js
+++ b/src/components/fields/VisibilitySelect.js
@@ -6,7 +6,7 @@ import Field from './Field';
 import Radio from './Radio';
 import Dropdown from './Dropdown';
 
-class UnconnectedVisibilitySelect extends Component {
+export class UnconnectedVisibilitySelect extends Component {
   constructor(props, context) {
     super(props, context);
 
diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js
index 9424f8ed3..d331c4bef 100644
--- a/src/components/fields/derived.js
+++ b/src/components/fields/derived.js
@@ -5,6 +5,8 @@ import {UnconnectedNumeric} from './Numeric';
 import {UnconnectedAxisRangeValue} from './AxisRangeValue';
 import {UnconnectedRadio} from './Radio';
 import Info from './Info';
+import {UnconnectedColorPicker} from './ColorPicker';
+import {UnconnectedVisibilitySelect} from './VisibilitySelect';
 import {connectToContainer, getAllAxes, getAxisTitle, axisIdToAxisName} from 'lib';
 
 export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
@@ -638,7 +640,7 @@ export const HoveronDropdown = connectToContainer(UnconnectedDropdown, {
   },
 });
 
-export const HovermodeDropdown = connectToContainer(UnconnectedDropdown, {
+export const HovermodeDropdown = connectToContainer(UnconnectedVisibilitySelect, {
   modifyPlotProps: (props, context, plotProps) => {
     const {localize: _} = context;
 
@@ -652,5 +654,14 @@ export const HovermodeDropdown = connectToContainer(UnconnectedDropdown, {
           ]
         : [{label: _('Closest'), value: 'closest'}, {label: _('Disable'), value: false}];
     plotProps.clearable = false;
+    plotProps.dropdown = true;
+    plotProps.showOn = ['closest', 'x', 'y'];
+  },
+});
+
+export const HoverColor = connectToContainer(UnconnectedColorPicker, {
+  modifyPlotProps: (props, context, plotProps) => {
+    plotProps.isVisible = Boolean(context.fullLayout.hovermode);
+    return plotProps;
   },
 });
diff --git a/src/default_panels/StyleLayoutPanel.js b/src/default_panels/StyleLayoutPanel.js
index 15500d65d..b68cfd49d 100644
--- a/src/default_panels/StyleLayoutPanel.js
+++ b/src/default_panels/StyleLayoutPanel.js
@@ -13,6 +13,7 @@ import {
   VisibilitySelect,
   HovermodeDropdown,
 } from '../components';
+import {HoverColor} from '../components/fields/derived';
 
 const StyleLayoutPanel = (props, {localize: _}) => (
   <TraceRequiredPanel>
@@ -61,32 +62,57 @@ const StyleLayoutPanel = (props, {localize: _}) => (
       <Numeric label={_('Right')} attr="margin.r" units="px" />
       <Numeric label={_('Padding')} attr="margin.pad" units="px" />
     </PlotlyFold>
-    <PlotlyFold name={_('Interaction')}>
-      <HovermodeDropdown label={_('Hover Interaction')} attr="hovermode" />
-      <Dropdown
-        label={_('Drag Interaction')}
-        attr="dragmode"
-        options={[
-          {label: _('Zoom'), value: 'zoom'},
-          {label: _('Select'), value: 'select'},
-          {label: _('Pan'), value: 'pan'},
-          {label: _('Lasso'), value: 'lasso'},
-          {label: _('Orbit'), value: 'orbit'},
-          {label: _('Turntable'), value: 'turntable'},
-        ]}
-        clearable={false}
-      />
-      <Dropdown
-        label={_('Select Direction')}
-        attr="selectdirection"
-        options={[
-          {label: _('Any'), value: 'any'},
-          {label: _('Horizontal'), value: 'h'},
-          {label: _('Vertical'), value: 'v'},
-          {label: _('Diagonal'), value: 'd'},
-        ]}
-        clearable={false}
-      />
+    <PlotlyFold name={_('Interactions')}>
+      <PlotlySection name={_('Drag')} attr="dragmode">
+        <Dropdown
+          label={_('Mode')}
+          attr="dragmode"
+          options={[
+            {label: _('Zoom'), value: 'zoom'},
+            {label: _('Select'), value: 'select'},
+            {label: _('Pan'), value: 'pan'},
+            {label: _('Lasso'), value: 'lasso'},
+            {label: _('Orbit'), value: 'orbit'},
+            {label: _('Turntable'), value: 'turntable'},
+          ]}
+          clearable={false}
+        />
+        <Dropdown
+          label={_('Select Direction')}
+          attr="selectdirection"
+          options={[
+            {label: _('Any'), value: 'any'},
+            {label: _('Horizontal'), value: 'h'},
+            {label: _('Vertical'), value: 'v'},
+            {label: _('Diagonal'), value: 'd'},
+          ]}
+          clearable={false}
+        />
+      </PlotlySection>
+      <PlotlySection name={_('Hover')}>
+        <HovermodeDropdown label={_('Mode')} attr="hovermode">
+          <HoverColor
+            label={_('Background Color')}
+            attr="hoverlabel.bgcolor"
+            defaultColor="#FFF"
+            handleEmpty
+          />
+          <HoverColor
+            label={_('Border Color')}
+            attr="hoverlabel.bordercolor"
+            defaultColor="#000"
+            handleEmpty
+          />
+          <FontSelector label={_('Typeface')} attr="hoverlabel.font.family" clearable />
+          <Numeric label={_('Font Size')} attr="hoverlabel.font.size" />
+          <HoverColor
+            label={_('Font Color')}
+            attr="hoverlabel.font.color"
+            defaultColor="#000"
+            handleEmpty
+          />
+        </HovermodeDropdown>
+      </PlotlySection>
     </PlotlyFold>
   </TraceRequiredPanel>
 );