panel: fixes #7970. Description tooltip overflow.

This seems to work for the three use cases:

- Overflow on the left
- Overflow on the right
- Elements that are out of view on page load

public/app/features/panel/panel_directive.ts

@@ -156,11 +156,21 @@ module.directive('grafanaPanel', function($rootScope, $document) {
             content: function() {
               return ctrl.getInfoContent({mode: 'tooltip'});
             },
-            position: 'top center',
             classes: ctrl.error ? 'drop-error' : 'drop-help',
             openOn: 'hover',
             hoverOpenDelay: 100,
-            constrainToScrollParent: false,
+            remove: true,
+            tetherOptions: {
+              attachment: 'bottom left',
+              targetAttachment: 'top left',
+              constraints: [
+                {
+                  to: 'window',
+                  attachment: 'together',
+                  pin: true
+                }
+              ],
+            }
           });
         }
       }
@@ -185,6 +195,10 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         if (ctrl.skippedLastRefresh) {
           ctrl.refresh();
         }
+
+        if (infoDrop) {
+          infoDrop.position();
+        }
       };
 
       $document.on('scroll', refreshOnScroll);