panel-header: Unmount popper when not needed.

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

@@ -36,7 +36,7 @@ class Popper extends PureComponent<Props> {
             </div>
           )}
         </Reference>
-        <Transition in={show} timeout={100}>
+        <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
           {transitionState => (
             <ReactPopper placement={placement}>
               {({ ref, style, placement, arrowProps }) => {

public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap

@@ -12,27 +12,5 @@ exports[`Popover renders correctly 1`] = `
       Button with Popover
     </button>
   </div>
-  <div
-    className="popper"
-    style={
-      Object {
-        "left": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-        "top": 0,
-        "transition": "opacity 200ms linear",
-      }
-    }
-  >
-    <div
-      className="popper__background"
-    >
-      Popover text
-      <div
-        className="popper__arrow"
-      />
-    </div>
-  </div>
 </div>
 `;

public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap

@@ -15,27 +15,5 @@ exports[`Tooltip renders correctly 1`] = `
       Link with tooltip
     </a>
   </div>
-  <div
-    className="popper"
-    style={
-      Object {
-        "left": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-        "top": 0,
-        "transition": "opacity 200ms linear",
-      }
-    }
-  >
-    <div
-      className="popper__background"
-    >
-      Tooltip text
-      <div
-        className="popper__arrow"
-      />
-    </div>
-  </div>
 </div>
 `;