Make popover hide delay configurable to enable better UX

packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx

@@ -37,7 +37,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
       };
 
       return (
-        <PopperController content={popoverElement} placement="bottom-start">
+        <PopperController content={popoverElement} hideAfter={500}>
           {(showPopper, hidePopper, popperProps) => {
             return (
               <>

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx

@@ -6,7 +6,6 @@ import { ColorPickerProps } from './ColorPicker';
 import { GrafanaTheme, Themeable } from '../../types';
 import { PopperContentProps } from '../Tooltip/PopperController';
 
-// const DEFAULT_COLOR = '#000000';
 
 export interface Props extends ColorPickerProps, Themeable, PopperContentProps {}
 

packages/grafana-ui/src/components/Tooltip/Popper.tsx

@@ -13,8 +13,8 @@ const defaultTransitionStyles = {
 const transitionStyles: { [key: string]: object } = {
   exited: { opacity: 0 },
   entering: { opacity: 0 },
-  entered: { opacity: 1 },
+  entered: { opacity: 1, transitionDelay: '0s' },
-  exiting: { opacity: 0 },
+  exiting: { opacity: 0, transitionDelay: '500ms' },
 };
 
 export type RenderPopperArrowFn = (
@@ -41,7 +41,8 @@ class Popper extends PureComponent<Props> {
     return (
       <Manager>
         <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
-          {transitionState => (
+          {transitionState => {
+            return (
               <Portal>
                 <ReactPopper
                   placement={placement}
@@ -80,7 +81,8 @@ class Popper extends PureComponent<Props> {
                   }}
                 </ReactPopper>
               </Portal>
-          )}
+            );
+          }}
         </Transition>
       </Manager>
     );

packages/grafana-ui/src/components/Tooltip/PopperController.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import * as PopperJS from 'popper.js';
 
-// This API allows popovers to update Popper's position when e.g. popover content chaanges
+// This API allows popovers to update Popper's position when e.g. popover content changes
 // updatePopperPosition is delivered to content by react-popper
-export interface PopperContentProps  { updatePopperPosition?: () => void; }
+export interface PopperContentProps {
+  updatePopperPosition?: () => void;
+}
 
 export type PopperContent<T extends PopperContentProps> = string | React.ReactElement<T>;
 
@@ -29,6 +31,7 @@ interface Props {
   content: PopperContent<any>;
   className?: string;
   children: PopperControllerRenderProp;
+  hideAfter?: number;
 }
 
 interface State {
@@ -37,6 +40,8 @@ interface State {
 }
 
 class PopperController extends React.Component<Props, State> {
+  private hideTimeout: any;
+
   constructor(props: Props) {
     super(props);
 
@@ -58,6 +63,10 @@ class PopperController extends React.Component<Props, State> {
   }
 
   showPopper = () => {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+    }
+
     this.setState(prevState => ({
       ...prevState,
       show: true,
@@ -65,6 +74,15 @@ class PopperController extends React.Component<Props, State> {
   };
 
   hidePopper = () => {
+    if (this.props.hideAfter !== 0) {
+      this.hideTimeout = setTimeout(() => {
+        this.setState(prevState => ({
+          ...prevState,
+          show: false,
+        }));
+      }, this.props.hideAfter);
+      return;
+    }
     this.setState(prevState => ({
       ...prevState,
       show: false,