Merge pull request #14323 from grafana/develop-tooltip-css

Small tooltip css-adjustments and add css for position "bottom-start"…

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

@@ -60,7 +60,6 @@ export default function withPopper(WrappedComponent) {
     };
     };
 
 
     renderContent(content) {
     renderContent(content) {
-      console.log('render content');
       if (typeof content === 'function') {
       if (typeof content === 'function') {
         // If it's a function we assume it's a React component
         // If it's a function we assume it's a React component
         const ReactComponent = content;
         const ReactComponent = content;

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

@@ -76,6 +76,7 @@ export class PanelHeaderCorner extends PureComponent<Props> {
             content={this.getInfoContent}
             content={this.getInfoContent}
             className="popper__manager--block"
             className="popper__manager--block"
             refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
             refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
+            placement="bottom-start"
           >
           >
             <i className="fa" />
             <i className="fa" />
             <span className="panel-info-corner-inner" />
             <span className="panel-info-corner-inner" />

public/sass/components/_popper.scss

+$popper-margin-from-ref: 5px;
+
 .popper {
 .popper {
   position: absolute;
   position: absolute;
   z-index: $zindex-tooltip;
   z-index: $zindex-tooltip;
@@ -11,17 +13,24 @@
   height: 0;
   height: 0;
   border-style: solid;
   border-style: solid;
   position: absolute;
   position: absolute;
-  margin: 5px;
+  margin: 0px;
 }
 }
 
 
 .popper .popper__arrow {
 .popper .popper__arrow {
   border-color: $tooltipBackground;
   border-color: $tooltipBackground;
 }
 }
 
 
-.popper[data-placement^='top'] {
-  margin-bottom: 5px;
+.popper__background {
+  background: $tooltipBackground;
+  border-radius: $border-radius;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  padding: 10px;
 }
 }
 
 
+// Top
+.popper[data-placement^='top'] {
+  padding-bottom: $popper-margin-from-ref;
+}
 .popper[data-placement^='top'] .popper__arrow {
 .popper[data-placement^='top'] .popper__arrow {
   border-width: 5px 5px 0 5px;
   border-width: 5px 5px 0 5px;
   border-left-color: transparent;
   border-left-color: transparent;
@@ -29,34 +38,49 @@
   border-bottom-color: transparent;
   border-bottom-color: transparent;
   bottom: -5px;
   bottom: -5px;
   left: calc(50% - 5px);
   left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
   padding-top: 5px;
   padding-top: 5px;
 }
 }
 
 
+// Bottom
 .popper[data-placement^='bottom'] {
 .popper[data-placement^='bottom'] {
-  padding-top: 5px;
+  padding-top: $popper-margin-from-ref;
+}
+.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% - 5px);
 }
 }
 
 
-.popper__background {
-  background: $tooltipBackground;
-  border-radius: 3px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  padding: 10px;
+.popper[data-placement^='bottom-start'] {
+  padding-top: $popper-margin-from-ref;
+}
+.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'] .popper__arrow {
+.popper[data-placement^='bottom-end'] {
+  padding-top: $popper-margin-from-ref;
+}
+.popper[data-placement^='bottom-end'] .popper__arrow {
   border-width: 0 5px 5px 5px;
   border-width: 0 5px 5px 5px;
   border-left-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
   border-right-color: transparent;
   border-top-color: transparent;
   border-top-color: transparent;
   top: 0;
   top: 0;
-  left: calc(50% - 8px);
-  margin-top: 0;
-  margin-bottom: 0;
+  left: calc(100% - 5px);
 }
 }
+
+// Right
 .popper[data-placement^='right'] {
 .popper[data-placement^='right'] {
-  padding-left: 5px;
+  padding-left: $popper-margin-from-ref;
 }
 }
 .popper[data-placement^='right'] .popper__arrow {
 .popper[data-placement^='right'] .popper__arrow {
   border-width: 5px 5px 5px 0;
   border-width: 5px 5px 5px 0;
@@ -64,15 +88,13 @@
   border-top-color: transparent;
   border-top-color: transparent;
   border-bottom-color: transparent;
   border-bottom-color: transparent;
   left: 0;
   left: 0;
-  top: calc(50% - 8px);
-  margin-left: 0;
-  margin-right: 0;
+  top: calc(50% - 5px);
 }
 }
 
 
+// Left
 .popper[data-placement^='left'] {
 .popper[data-placement^='left'] {
-  margin-right: 5px;
+  padding-right: $popper-margin-from-ref;
 }
 }
-
 .popper[data-placement^='left'] .popper__arrow {
 .popper[data-placement^='left'] .popper__arrow {
   border-width: 5px 0 5px 5px;
   border-width: 5px 0 5px 5px;
   border-top-color: transparent;
   border-top-color: transparent;
@@ -80,8 +102,6 @@
   border-bottom-color: transparent;
   border-bottom-color: transparent;
   right: -5px;
   right: -5px;
   top: calc(50% - 5px);
   top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
 }
 }
 
 
 .popper__target,
 .popper__target,