panel-header: Make it possible to style the reference element and fix so panel description looks good

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

@@ -6,22 +6,24 @@ interface Props {
   show: boolean;
   placement?: any;
   content: string | ((props: any) => JSX.Element);
+  refClassName?: string;
 }
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { children, renderContent, show, placement } = this.props;
+    const { children, renderContent, show, placement, refClassName } = this.props;
     const { content } = this.props;
-    const modifiers = {
-      flip: { enabled: false },
-      preventOverflow: { enabled: false },
-      hide: { enabled: false },
-    };
     return (
       <Manager>
-        <Reference>{({ ref }) => <div ref={ref}>{children}</div>}</Reference>
+        <Reference>
+          {({ ref }) => (
+            <div className={`popper_ref ${refClassName || ''}`} ref={ref}>
+              {children}
+            </div>
+          )}
+        </Reference>
         {show && (
-          <ReactPopper placement={placement} modifiers={modifiers}>
+          <ReactPopper placement={placement}>
             {({ ref, style, placement, arrowProps }) => {
               return (
                 <div ref={ref} style={style} data-placement={placement} className="popper">

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

@@ -8,11 +8,13 @@ export interface UsingPopperProps {
   placement?: string;
   content: string | ((props: any) => JSX.Element);
   className?: string;
+  refClassName?: string;
 }
 
 interface Props {
   placement?: string;
   className?: string;
+  refClassName?: string;
   content: string | ((props: any) => JSX.Element);
 }
 

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

@@ -45,11 +45,13 @@ export class PanelHeader extends PureComponent<Props, State> {
     return (
       <div className={panelHeaderClass}>
         {panel.description && (
-          <Tooltip content={panel.description}>
-            <span className="panel-info-corner panel-info-corner--info">
-              <i className="fa" />
-              <span className="panel-info-corner-inner" />
-            </span>
+          <Tooltip
+            content={panel.description}
+            className="absolute"
+            refClassName="panel-info-corner panel-info-corner--info"
+          >
+            <i className="fa" />
+            <span className="panel-info-corner-inner" />
           </Tooltip>
         )}
         {isLoading && (

public/sass/utils/_utils.scss

@@ -78,3 +78,7 @@ button.close {
 .d-inline-block {
   display: inline-block;
 }
+
+.absolute {
+  position: absolute;
+}