From e55659192af43763028739109885d305778cfdcf Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 4 Dec 2018 17:00:00 +0100
Subject: [PATCH] Small tooltip css-adjustments and add css for position
 "bottom-start" used by the panel header corner

---
 .../core/components/Tooltip/withPopper.tsx    |  1 -
 .../PanelHeader/PanelHeaderCorner.tsx         |  1 +
 public/sass/components/_popper.scss           | 80 ++++++++++++-------
 3 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/public/app/core/components/Tooltip/withPopper.tsx b/public/app/core/components/Tooltip/withPopper.tsx
index fc4c352d0f5..4ba05937531 100644
--- a/public/app/core/components/Tooltip/withPopper.tsx
+++ b/public/app/core/components/Tooltip/withPopper.tsx
@@ -60,7 +60,6 @@ export default function withPopper(WrappedComponent) {
     };
 
     renderContent(content) {
-      console.log('render content');
       if (typeof content === 'function') {
         // If it's a function we assume it's a React component
         const ReactComponent = content;
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
index 60471cff19f..e8483ec467a 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -76,6 +76,7 @@ export class PanelHeaderCorner extends PureComponent<Props> {
             content={this.getInfoContent}
             className="popper__manager--block"
             refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
+            placement="bottom-start"
           >
             <i className="fa" />
             <span className="panel-info-corner-inner" />
diff --git a/public/sass/components/_popper.scss b/public/sass/components/_popper.scss
index 79dc24f5e43..4a3c1cdc1b0 100644
--- a/public/sass/components/_popper.scss
+++ b/public/sass/components/_popper.scss
@@ -11,33 +11,13 @@
   height: 0;
   border-style: solid;
   position: absolute;
-  margin: 5px;
+  margin: 0px;
 }
 
 .popper .popper__arrow {
   border-color: $tooltipBackground;
 }
 
-.popper[data-placement^='top'] {
-  margin-bottom: 5px;
-}
-
-.popper[data-placement^='top'] .popper__arrow {
-  border-width: 5px 5px 0 5px;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-  bottom: -5px;
-  left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 5px;
-}
-
-.popper[data-placement^='bottom'] {
-  padding-top: 5px;
-}
-
 .popper__background {
   background: $tooltipBackground;
   border-radius: 3px;
@@ -45,16 +25,58 @@
   padding: 10px;
 }
 
+// Top
+.popper[data-placement^='top'] {
+  padding-bottom: 5px;
+}
+.popper[data-placement^='top'] .popper__arrow {
+  border-width: 5px 5px 0 5px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  bottom: -5px;
+  left: calc(50% - 5px);
+  padding-top: 5px;
+}
+
+// Bottom
+.popper[data-placement^='bottom'] {
+  padding-top: 5px;
+}
 .popper[data-placement^='bottom'] .popper__arrow {
   border-width: 0 5px 5px 5px;
   border-left-color: transparent;
   border-right-color: transparent;
   border-top-color: transparent;
   top: 0;
-  left: calc(50% - 8px);
-  margin-top: 0;
-  margin-bottom: 0;
+  left: calc(50% - 5px);
 }
+
+.popper[data-placement^='bottom-start'] {
+  padding-top: 5px;
+}
+.popper[data-placement^='bottom-start'] .popper__arrow {
+  border-width: 0 5px 5px 5px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  top: 0;
+  left: 5px;
+}
+
+.popper[data-placement^='bottom-end'] {
+  padding-top: 5px;
+}
+.popper[data-placement^='bottom-end'] .popper__arrow {
+  border-width: 0 5px 5px 5px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  top: 0;
+  left: calc(100% - 5px);
+}
+
+// Right
 .popper[data-placement^='right'] {
   padding-left: 5px;
 }
@@ -64,15 +86,13 @@
   border-top-color: transparent;
   border-bottom-color: transparent;
   left: 0;
-  top: calc(50% - 8px);
-  margin-left: 0;
-  margin-right: 0;
+  top: calc(50% - 5px);
 }
 
+// Left
 .popper[data-placement^='left'] {
-  margin-right: 5px;
+  padding-right: 5px;
 }
-
 .popper[data-placement^='left'] .popper__arrow {
   border-width: 5px 0 5px 5px;
   border-top-color: transparent;
@@ -80,8 +100,6 @@
   border-bottom-color: transparent;
   right: -5px;
   top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
 }
 
 .popper__target,