panel-header: Add fade in transition to tooltip

public/app/core/components/Tooltip/Popper.tsx

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
 import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
+import Transition from 'react-transition-group/Transition';
+
+const defaultTransitionStyles = {
+  transition: 'opacity 200ms linear',
+  opacity: 0,
+};
+
+const transitionStyles = {
+  exited: { opacity: 0 },
+  entering: { opacity: 0 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+};
 
 
 interface Props {
 interface Props {
   renderContent: (content: any) => any;
   renderContent: (content: any) => any;
@@ -13,6 +26,7 @@ class Popper extends PureComponent<Props> {
   render() {
   render() {
     const { children, renderContent, show, placement, refClassName } = this.props;
     const { children, renderContent, show, placement, refClassName } = this.props;
     const { content } = this.props;
     const { content } = this.props;
+
     return (
     return (
       <Manager>
       <Manager>
         <Reference>
         <Reference>
@@ -22,11 +36,21 @@ class Popper extends PureComponent<Props> {
             </div>
             </div>
           )}
           )}
         </Reference>
         </Reference>
-        {show && (
+        <Transition in={show} timeout={100}>
+          {transitionState => (
             <ReactPopper placement={placement}>
             <ReactPopper placement={placement}>
               {({ ref, style, placement, arrowProps }) => {
               {({ ref, style, placement, arrowProps }) => {
                 return (
                 return (
-                <div ref={ref} style={style} data-placement={placement} className="popper">
+                  <div
+                    ref={ref}
+                    style={{
+                      ...style,
+                      ...defaultTransitionStyles,
+                      ...transitionStyles[transitionState],
+                    }}
+                    data-placement={placement}
+                    className="popper"
+                  >
                     <div className="popper__background">
                     <div className="popper__background">
                       {renderContent(content)}
                       {renderContent(content)}
                       <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
                       <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
@@ -36,6 +60,7 @@ class Popper extends PureComponent<Props> {
               }}
               }}
             </ReactPopper>
             </ReactPopper>
           )}
           )}
+        </Transition>
       </Manager>
       </Manager>
     );
     );
   }
   }