From 62df406d7b2c14356cfb91ddce29cb7c49e53e0e Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Sun, 31 Dec 2017 14:26:02 +0300
Subject: [PATCH] fix info popover, #10302 (#10377)

---
 public/app/core/components/info_popover.ts | 25 +++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/public/app/core/components/info_popover.ts b/public/app/core/components/info_popover.ts
index 9d2d13c9f01..2701c7b6983 100644
--- a/public/app/core/components/info_popover.ts
+++ b/public/app/core/components/info_popover.ts
@@ -10,10 +10,10 @@ export function infoPopover() {
     template: '<i class="fa fa-info-circle"></i>',
     transclude: true,
     link: function(scope, elem, attrs, ctrl, transclude) {
-      var offset = attrs.offset || '0 -10px';
-      var position = attrs.position || 'right middle';
-      var classes = 'drop-help drop-hide-out-of-bounds';
-      var openOn = 'hover';
+      let offset = attrs.offset || '0 -10px';
+      let position = attrs.position || 'right middle';
+      let classes = 'drop-help drop-hide-out-of-bounds';
+      let openOn = 'hover';
 
       elem.addClass('gf-form-help-icon');
 
@@ -26,14 +26,14 @@ export function infoPopover() {
       }
 
       transclude(function(clone, newScope) {
-        var content = document.createElement('div');
+        let content = document.createElement('div');
         content.className = 'markdown-html';
 
         _.each(clone, node => {
           content.appendChild(node);
         });
 
-        var drop = new Drop({
+        let dropOptions = {
           target: elem[0],
           content: content,
           position: position,
@@ -50,11 +50,16 @@ export function infoPopover() {
               },
             ],
           },
-        });
+        };
 
-        var unbind = scope.$on('$destroy', function() {
-          drop.destroy();
-          unbind();
+        // Create drop in next digest after directive content is rendered.
+        scope.$applyAsync(() => {
+          let drop = new Drop(dropOptions);
+
+          let unbind = scope.$on('$destroy', function() {
+            drop.destroy();
+            unbind();
+          });
         });
       });
     },